Question

我在下面添加了一个小提琴，可以直观地展示我正在处理的问题。在搞乱css选择器时，我已经意识到！important选择器非常强大，直到遇到它的老板：not selector。

div:not(.red){
    background-color:green !important;
    width:400px;
    height:50px
}

在我的小提琴中，我向所有背景宣布紫色的初始值。我命令第一个专门为红色，第二个为蓝色然后，我将除了红色以外的所有背景都命名为绿色。它就这样做了！

到目前为止很好

然后我做了一个棕色，另一个棕色，颜色变为紫色重要。它改变了两种棕色类。

当我明确要求除了红色以外的所有颜色都必须是绿色时，这两个棕色的颜色不会变得令人困惑！我对自己说，＆＃34;重要的选择器确定它很强大！＆＃34;然后我为我的：not选择器类添加了一个！important选择器。鉴于紫色的重要类是最底层的类，它将覆盖绿色上的重要部分并保持紫色.... OOOOHHHHH NOOOOOO !!!!他们都（红色除外）变成了绿色！

是什么给出的？

css选择器的真正层次结构和命令链是什么？

以下是FIDDLE

Answer 1

这基本上是因为selector's specificity.

根据MDN，

非伪类的特殊性是其论证的特异性。与其他伪类不同，not伪类不会添加到选择器特性。

因此，无论顺序如何，选择器div:not(.red)都比.brown更具体：(example)

div:not(.red) {
    background-color:green; /* Still applied */
}
.brown {
    background-color:purple; /* Overwritten - even though this appears last */
}

当我们在!important中添加div:not(.red) { background-color:green!important; /* Still applied */ } .brown { background-color:purple!important; /* Overwritten - even though this appears last */ }

时，会发生同样的事情

.brown

但是，如果我们通过添加类型（div.brown）来增加!important的特异性，则会应用背景颜色。 (example)两个选择器现在具有相同的特异性，因此当div:not(.red) { background-color:green; } div.brown { background-color:purple; /* This is applied now */ } /* ..even if both declarations have !important */被添加到两者时会发生同样的事情。 (example)此时，这一切都归结为秩序。

!important

重要的是要注意{{1}} 不会增加选择器的特异性。相反，它只是在确定应用哪些声明时改变级联性质。如需详细解释，请参阅(example)。

：not（.MyClass）选择器很重要

1 个答案: