屬性選擇器的行爲

Question

我想了解CSS中的通配符選擇器如何工作？ 考慮以下HTML標記：

<div id="child"> 
</div> 

和相應的CSS：

div[id="child"] {border-color: green; } 
#child{ 
    border: 20px solid; 
    background: aqua; 
    height: 50px; 
    margin: 10px; 
} 

我認爲，div.child的這種風格將是： 邊界：20px的固體; 背景：水色; height：50px; margin：10px; border-color：green; 也就是說border-color:green只是對div.child的樣式表的補充。但是，如果我們寫

div[id="child"] {border-color: green!important; } 
#child{ 
    border: 20px solid; 
    background: aqua; 
    height: 50px; 
    margin: 10px; 
} 

它就像

#child{ 
    border-color: green; 
    border: 20px solid; 
    background: aqua; 
    height: 50px; 
    margin: 10px; 
} 

問：爲什麼我們必須使用div[id="child"] {border-color: green!important; }而不是div[id="child"] { border-color: green }用於應用綠色邊境？

Answer 1

這是一個特殊問題。 Example demonstrating this.

請參考下列文件：

6.4.3 Calculating a selector's specificity

計數在選擇器ID的屬性的數量（= b）的

計數其他屬性和僞的數量選擇器中的類（= c）

計算元素名稱和僞元素的數量在選擇器（= d）

因此#child具有100和div[id="child"]特異性TS將具有11的!important

用法的特異性將有效地覆蓋由#child施加的邊界。

或者，您可以使用以下內容，並避免使用!important。

jsFiddle example

div#child[id="child"] { 
    border-color: green; 
} 

Answer 2

它與選擇器的特殊性有關。當試圖應用相互排斥樣式的多個選擇器之間存在衝突時，特異性是決定哪些樣式勝出的度量。

所以，你的第一選擇div[id="child"]是一個屬性/類選擇，它具有較低的特異性比從你的第二塊ID選擇：#child

當您申請!important於一種風格，它不管施加特異性。由於這個原因，它也應該謹慎使用。

Answer 3

這並不能說明使用!important與否的區別使用它，而是如何不使用兩個規則使用綠色邊框。

---

如果你看一下border:的文檔，你會發現這一點：

Formal syntax: <br-width> || <br-style> || <color>

<color>：
一個<color>表示邊框的顏色。如果未設置，則其默認值爲元素的color屬性的值（文本顏色，而不是背景顏色）。請參閱邊框顏色。

默認color是#000（黑色）。

因此，通過寫

border: 20px solid; 

你基本上確定：

border-width: 20px 
border-style: solid; 
border-color: #000; 

如果你把border-color: green之前規則，它會被覆蓋。所以，你既可以寫：

border: 20px solid; 
border-color: green; 

或

border: 20px solid green; 

使用兩個規則只適用邊框顏色是不必要的。