Question

这没关系（没有空格）：

li.highlight{
    background:#FF9900 none repeat scroll 0 0;
}

这不起作用（带空格）：

li .highlight{
    background:#FF9900 none repeat scroll 0 0;
}

为什么？

Answer 1

后一个选择器不起作用，因为空格意味着选择器之间的关系（在这种情况下是后代）。

li.highlight /* defines an element of 'li' with a classname of 'highlight' */

li .highlight /* defines an element of class 'highlight' that's contained within an li element */

li > .highlight /* as pointed out by Neil (in comments), this would select an element of class highlight that is an immediate child/descendant of an li */

我应该解释一下我对“不会起作用”这句话的用法。显然，我使用了你的措辞，但我错误地这样做了。

它将工作，它只会选择 - 在注释中解释 - 在标记中没有的元素。

Answer 2

第一个例子：

<li class="highlight">this will be highlighted</li>

第二个例子：

<li class="highlight">
    <span class="highlight">this will be higlighted</span>
    <span>this won't be.</span>
</li>

Answer 3

因为空格（在选择器中）意味着下降DOM以找到匹配的标记，所以：

li.highlight
- 表示查找类名为突出显示的任何列表项并应用此样式
li。高光
- 表示查找类名称突出显示的任何元素，谁的祖先是列表项，并应用此样式

Answer 4

间距用于调用不同的元素，而不是与一个元素相关的项目。例如 .highlight 不是一个单独的元素。虽然调用 div table 是所有单独的元素

Answer 5

您可以将li .highlight视为其中隐含*。它相当于li *.highlight。

li.highlight将li元素与highlight类<li class="highlight">匹配。
li .highlight与highlight（后代）中属于li类的元素匹配：例如span中的<li><strong>OMG <span class="highlight">NO WAY!</span></li> }

Answer 6

没有空格，你选择了一个带有类高亮的li。使用空格，您将选择li的后代，其中后代具有类突出显示。

Answer 7

在第一种情况下，您选择所有带有“高亮”类的li标签。在第二种情况下，您可以选择带有“突出显示”类的li标签的子项。

您应该阅读the W3C specification中的CSS选择器。

何时离开空间，什么时候不在CSS？

7 个答案: