：重要的不是（.MyClass）選擇器

Question

我在下面添加了一個小提琴，它提供了我正在處理的問題的視覺效果。雖然搞亂了CSS選擇器，但我意識到！重要的選擇器非常強大，直到它遇到它的老闆：不是選擇器。

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

在我的小提琴中，我宣佈紫色的初始值爲我的所有背景。 我訂購了第一個專門爲紅色的，第二個爲藍色的 我然後命令我除紅色以外的所有背景都是綠色。它做到了！

好爲止

然後我做了一個褐色，顏色與紫色很重要的變化另一褐色。它改變了兩個棕色班。

當我特別要求除紅色之外的所有東西都必須是綠色的時候，這兩個褐色不會變綠，這讓人感到困惑。我對自己說：「重要的選擇確定它很強！」然後，我添加了一個！重要的選擇器給我：不是選擇器類的好措施。鑑於紫色重要類是最底層的類，它將覆蓋重要的綠色，並保持紫色.... OOOOHHHHH NOOOOOO !!!!他們都（紅色除外）變成綠色！

什麼給？

什麼是真正的層次和命令鏈上的CSS選擇器？

這裏是FIDDLE

Answer 1

這基本上是因爲selector's specificity.

據MDN，

的特異性：不是僞類是其參數的特異性。不是僞類不會添加到選擇器的特殊性，不像其他僞類。

因此選擇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 */ 
} 

---

但是，如果我們通過在類型中添加.brown來增加特異性，則將應用其（div.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。