何时在CSS中留空间，何时不留？

Question

何时在CSS中留空间，何时不留？

4

这是可以的（不带空格）：

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

这个不会起作用（带空格）：

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

为什么？

- omg

我不是完全确定，但第二个意思不是“应用于LI和任何类为'highlight'的元素”吗？第一个意思是“应用于类设置为'highlight'的LI元素”。 - Michael Todd

7个回答

3

第一个例子：

<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>

- jimyi

2

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

li.highlight
- 意思是查找任何具有类名为highlight的列表项，并应用此样式
li .highlight
- 意思是查找任何祖先为列表项的class name为highlight的元素，并应用此样式

- PatrikAkerstrand

2

spacing是用来调用不同元素而不是与一个元素相关的项目。例如，.highlight不是一个单独的元素。而调用div table则是完全分开的元素。

- Aduljr

2

li .highlight 相当于在 li 选择器后面加了个隐含的 *，即等价于 li *.highlight。

li.highlight 匹配具有类名为 highlight 的 li 元素：<li class="highlight">。
li .highlight 匹配嵌套在 li 内部（即后代）的具有类名为 highlight 的元素，比如 <li><strong>OMG <span class="highlight">NO WAY!</span></li> 中的 span 元素。

- John Kugelman

1

没有空格，您正在选择一个具有高亮类的li。带有空格，您正在选择li的后代，其中后代具有高亮类。

- Pim Jager

1

第一种情况，您选择所有类为“highlight”的li标签。在第二种情况下，您选择具有类“highlight”的li标签的子元素。

您应该阅读W3C规范中有关CSS选择器的内容。

- Kees de Kooter

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Thomas · Accepted Answer

由于空格表示选择器之间存在关系（在这种情况下是后代关系），因此后面的选择器不起作用。

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 */

我应该解释一下我使用“不起作用”这个短语的原因。显然，我错误地使用了你的措辞。

它能够正常工作，只是会选择一个在您的标记中不存在的元素-如评论中所述。