点什么是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>