组合选择器时空间意味着没有空间吗？

Question

在CSS中，选择器与空格相结合意味着descendance。

但在我读到的另一个答案How to combine class and ID in CSS selector?中，类似的语法意味着在一个标签中重合选定的标记。

CSS解析器是否真正区分空间和无空间，或者这两种情况下的语法相同？

Answer 1

是的，空格在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>

{{1}}

Answer 2

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

.foo .bar {...

表示descendant element。这将使用类“bar”作为内部div的目标，例如，

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

<强> jsFiddle example

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

.foo.bar {...

在这个示例中，将使用类foo和bar定位div：

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

<强> jsFiddle example

Answer 3

选择.bee的直接后裔.aye：

  

.aye＆gt; .bee {...}

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

  

.aye，.bee {...}

选择.bee只是.aye的后代（不一定是直系后代）：

  

.aye .bee {...}

选择同时为.aye和.bee的元素：

  

.aye.bee {...}