我在下面添加了一个小提琴,可以直观地展示我正在处理的问题。在搞乱css选择器时,我已经意识到!important选择器非常强大,直到遇到它的老板:not selector。
div:not(.red){
background-color:green !important;
width:400px;
height:50px
}
在我的小提琴中,我向所有背景宣布紫色的初始值。 我命令第一个专门为红色,第二个为蓝色 然后,我将除了红色以外的所有背景都命名为绿色。它就这样做了!
到目前为止很好
然后我做了一个棕色,另一个棕色,颜色变为紫色重要。它改变了两种棕色类。当我明确要求除了红色以外的所有颜色都必须是绿色时,这两个棕色的颜色不会变得令人困惑!我对自己说,"重要的选择器确定它很强大!"然后我为我的:not选择器类添加了一个!important选择器。鉴于紫色的重要类是最底层的类,它将覆盖绿色上的重要部分并保持紫色.... OOOOHHHHH NOOOOOO !!!!他们都(红色除外)变成了绿色!
是什么给出的?
css选择器的真正层次结构和命令链是什么?
以下是FIDDLE
答案 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)。