类名由空格连接或分隔

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 {...}

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

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