Html 在CSS中，什么是点某物后跟没有点的某物

比如说,

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

.foo-bar
富邦先生{
... ...
}

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

---

谢谢

初始选择器后面的内容是HTML节点的后代

例如：

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

将影响以下方面的

img

：

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

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

---

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

...
...

在本例中，只有“bar”元素将获得您的样式。“bam”不会获得样式，因为它没有包含类为“foo”的元素。

您的CSS：

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

.foo-bar.foo-bam{
... ...
}

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

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

一些东西。。。

@Blender my bad，不完全熟悉极其具体的术语。用“后代”替换“孩子”，你的答案都是好的

是子组合符。空格是后代组合符。谢谢，它似乎与.foo>bam（=.foo-bam）相同。那么，.foo-bam，.foo-bar{…}，这是否意味着它们（）共享相同的属性？因此，空格表示子代，而>表示直接子代？@Blender感谢您的提示，我不知道！有意思。不完全是，那里没有逗号。他们都是孩子。

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