覆蓋在CSS的考慮順序文件

Question

我輸入文本

<input type="text" class="name"> 

有人能解釋爲什麼這CCS角色

input[type="text"], input[type="search"], input[type="password"] { 

     background: none repeat scroll 0 0 #FFFFFF; 
} 

覆蓋

.name{background:yellow} 

不分先後順序的（誰來了第一）在CSS文件。

但如果我指定了父親的類的名稱取代是相反

例如

.form .name { 
    background:yellow 

} 

覆蓋這個

input[type="text"], input[type="search"], input[type="password"] { 

     background: none repeat scroll 0 0 #FFFFFF; 

} 

感謝 Baaroz

Answer 1

我真的很喜歡這個規則（引自wonderful article）用於測量選擇器特異性：

計算選擇器中的ID屬性數（= a）。在選擇器中計算 數量的其他屬性和僞類（= b）。 計算選擇器中的元素名稱和僞元素的數量 （= c）。串聯的三個數字a-b-c給人的特異性

對於.name選擇，它只是0-1-0 - 只是一個單一的類名。

對於.form .name，它是0-2-0 - 兩個類名。

對於input[type="text"]，它是0-1-1，因爲屬性選擇器與元素名稱組合在一起。顯然，它比0-1-0更具體，但不到0-2-0。 ）