:not(.MyClass) 重要的选择器

Question

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

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

在我的小提琴中，我向所有背景声明了紫色的初始值。 我专门订购了第一个是红色的，第二个是蓝色的 然后，我将除红色以外的所有背景都订购为绿色。确实如此！

目前还不错

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

当我特别要求除了红色之外的所有东西都必须是绿色时，这两个棕色没有变成绿色，令人困惑！我对自己说，“重要的选择器一定要强！”然后我在我的 :not 选择器类中添加了一个 !important 选择器，以进行良好的衡量。鉴于紫色重要类是最底层的类，它将覆盖绿色上的重要并保持紫色....OOOOHHHHH NOOOOOO ！！！他们都（除了红色）变成了绿色！

什么给了？

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

这里是FIDDLE

Answer 1

基本上是因为selector's specificity.

根据MDN，

:not 伪类的特殊性是其参数的特殊性。 :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 时会发生同样的事情：(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。