css - 由空格连接或分隔的类名

Question

你什么时候用空格分隔样式类？例如：以下两块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 号字体。

Answer 1

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

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

div.foo.bar {...}

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

div.foo .bar {...}

Answer 2

空格表示嵌套：

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

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

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

Answer 3

div.special指

<div class="special"> <- this

div .special指

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

不一定是pBTW

Answer 4

该空间指出这是一个子项。

IE

div.special 

定位一个具有该类的 div，special而

div .special

special以元素内具有类的div元素为目标

Answer 5

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

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