css - :not(. MyClass) 选择器与重要

Question

我在下面添加了一个 fiddle ，可以直观地显示我正在处理的问题。在摆弄 css 选择器时，我意识到 !important 选择器非常强大，直到它遇到了它的老大 :not 选择器。

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

在我的 fiddle 中，我为所有背景声明了紫色的初始值。 我特意订购了第一个为红色，第二个为蓝色 然后我将除红色之外的所有背景都改为绿色。确实如此!

到目前为止还不错

然后我做了一个棕色，另一个棕色的颜色变成了紫色，很重要。它改变了两个棕色阶层。

当我特别要求除了红色之外的所有颜色都必须是绿色时，令人困惑的是这两种棕色没有变成绿色!我对自己说:“重要的选择器一定很强!”然后我向我的 :not 选择器类添加了一个 !important 选择器，以达到良好的效果。鉴于紫色的重要类是最底层的类，它将覆盖绿色上的重要类并保持紫色....OOOOHHHHH NOOOOOOO!!!!它们全部(红色除外)都变成了绿色!

什么给了？

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

这是FIDDLE

Answer 1

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

根据MDN ,

The specificity of the :not pseudo-class is the specificity of its argument. The :not pseudo-class does not add to the selector specificity, unlike other pseudo-classes.

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

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

---

当我们在声明中添加 !important 时，也会发生同样的事情:(example)

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

---

但是，如果我们通过添加类型 (div.brown) 来提高 .brown 的特异性，其背景颜色将会被应用。 (example)现在，两个选择器具有相同的特异性，因此当将 !important 添加到两者时，会发生相同的情况。 (example)至此，一切都归结为秩序。

div:not(.red) {
    background-color:green;
}
div.brown {
    background-color:purple; /* This is applied now */
}                              /* ..even if both declarations have !important */

---

需要注意的是，!important不会增加选择器的特异性。相反，它只是改变了确定应用哪些声明的级联性质。有关解释这一点的详细答案，请参阅 this answer by BoltClock .