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

时间:2014-03-19 01:33:31

标签: css css-selectors

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

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

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

到目前为止很好

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

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

是什么给出的?

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

以下是FIDDLE

1 个答案:

答案 0 :(得分:4)

这基本上是因为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)