html - 当组合选择器时，空格和没有空格的意思一样吗？

Question

在 CSS 中，将选择器与空格结合起来意味着后代。

但在另一个答案中，如何在 CSS 选择器中结合类和 ID？我读到，类似的语法意味着在一个标签中选择的标记重合。

CSS 解析器是否真的区分了空格和无空格，或者这是在两种情况下都有效的相同语法？

score 12 · Accepted Answer

是的，空格在 CSS 规则中很重要。

#tag.flower表示同时具有id="tag"和的元素class="flower"，其中#tag .flower表示在具有的元素class="flower"内部的元素id="tag"。

例如：

#tag.flower

<div id="tag" class="flower"></div>

#tag .flower

<div id="tag">
    <div class="flower"></div>
</div>

score 5 · Accepted Answer

CSS 选择器中的空格，例如：

.foo .bar {...

表示一个后代元素。例如，这将针对具有“bar”类的内部 div，

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

删除空格意味着您选择的元素具有两个类，例如：

.foo.bar {...

在此示例中，这将针对具有类 foo 和 bar 的 div：

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

score 2 · Accepted Answer

选择.bee哪个是的直接后代.aye：

.aye > .bee {...}

选择元素.aye和元素.bee：

.aye, .bee {...}

要选择.bee哪个只是.aye（不一定是直接后代）的后代：

.aye .bee {...}

要选择既是.aye又是的元素.bee：

.aye.bee {...}

3 回答 3