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

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>

不是p BTW

Answer 4

该空间指出这是一个儿童用品。

IE

div.special

定位具有类special的div

div .special

在special元素

中定位具有类div的元素

Answer 5

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

因此，在您的情况下，您可以使用.special或使用div.special

类名由空格连接或分隔

5 个答案: