由空格连接或分隔的类名答案

【问题标题】：Class names concatenated or separated by a space由空格连接或分隔的类名
【发布时间】：2016-12-05 17:17:29
【问题描述】：

什么时候用空格分隔样式类？那么例如：下面两块css有什么区别？

区块 1：

div {
    color: brown;
}

div.special {
    font-size: 18px;
}

第 2 块：

div {
    color: brown;
}

div .special {
    font-size: 18px;
}

这是 HTML：

<div class="special">The quick brown fox jumps over the lazy dog.</div>

我尝试了两个版本。只有第 1 块的文本才会是 18 号字体。

【问题讨论】：

标签： css

【解决方案1】：

当你想引用后代元素时，你用空格分隔类，当你想引用具有多个类的单个元素时，你将它们连接起来。

例如，引用具有两个类的 div，例如<div class="foo bar"> 你可以使用：

div.foo.bar {...}

要引用子 span 元素 <div class="foo"><span class="bar">stuff</span></div>，您可以使用：

div.foo .bar {...}

【讨论】：

我可能会说“一个或多个类”而不是“多个”，但除此之外，这是一个很好、简洁的答复！
非常感谢您的快速回复！

【解决方案2】：

空格表示嵌套：

div .foo /* .foo is inside div */

没有空格表示进一步的特异性：

div.foo /* any div that is also .foo */

【讨论】：

【解决方案3】：

div.special指的是

<div class="special"> <- this

div .special指的是

<div>
    <p class="special"> <-  this
</div>

不一定是p BTW

【讨论】：

【解决方案4】：

空格说明这是一个子项。

IE

div.special

定位具有 special 类的 div 而

div .special

在 div 元素内定位具有类 special 的元素

【讨论】：

【解决方案5】：

div.special 将选择 div 元素，该元素具有 .special 类，并且不会选择任何其他具有 .special 类的元素，因此如果您有类似 <ul class="special"> 的元素，则将被排除在外，其中 div .special将选择所有嵌套在div 中的具有.special 类的元素，因此这将选择<ul class="special">，因此得出第一个比第二个更严格的结论

因此，在您的情况下，您可以简单地使用.special，也可以使用div.special

【讨论】：