html - 什么是点的东西，然后是CSS中没有点的东西

Question

例如，

.foo bar
.foo bam {
    <key, values>
    ... ...
}

我知道 .foo 选择了“foo”类，但是 bar 和 bam 呢？他们是“foo”的后代吗？和 bar、bam 共享花括号内的键值？

谢谢！

Answer 1

这意味着样式将仅应用于具有“foo”类的元素内部的“bar”和“bam”元素。

<div class="foo">
  <bar>...</bar>
</div>

<div class="meal">
  <bam>...</bam>
</div>

在这个例子中，只有“bar”元素会得到你的样式。“bam” 不会得到样式，因为它没有包含“foo”类的元素。

Answer 2

初始选择器后面的那些东西是 HTML 节点的后代。

例如：

.my-class img {
     width: 50px;
     height: 50px;
}

会影响img：

<div class="my-class">
    <img src="myImage.png"/>
</div>

不会影响img：

<div class="my-other-class">
    <img src="myImage.png"/>
</div>

Answer 3

你的 CSS：

.foo bar .foo bam {
    <key, values>
    ... ...
}

（注意，没有逗号）选择类似于以下的元素：

<div class="foo"> 
    <bar>
       <div class="foo">
           <bam>some stuff...</bam>
       </div>
    </bar>
</div>