元素選擇器如何比ID選擇器更具體？

Question

據我所知，元素是最不具體的。 （元素與id）。 請幫助我理解選擇器的特殊性。

<div id="container"> 
    <div id="firstDiv">FIRST Div inside CONTAINER</div> 
    <div id="secondDiv">SECOND Div inside CONTAINER</div> 
</div> 

body{ 
    width: 780px; 
    margin: 20px auto; 
} 
#container > div:not(:last-of-type){ 
    margin-bottom: 0px; /*How its more specific than ID selector below? */ 
} 
#container { 
    border: 15px solid orange; 
    padding: 10px; 
} 
#firstDiv{ 
    margin: 50px; /*This is not taking effect*/ 
    border: 5px solid blueviolet; 
} 
#secondDiv{ 
    border: 5px solid brown;  
} 

http://jsfiddle.net/t2RRq/

Answer 1

要了解CSS的特殊性，閱讀The Specificity Wars。有一個方便的參考表，太：

所以，像#foo選擇將有1,0,0特異性，而像p元素選擇將有0,0,1特異性。在這兩個中，ID選擇器將「贏」，因爲100大於1。

更具體的（嘿嘿）版本還包括僞元素和僞類可以在這裏找到：http://www.standardista.com/css3/css-specificity/

Answer 2

當應用規則，選擇特異性是通過計算所有簡單的選擇（通過任何組合子鏈接）來計算，而不是僅僅的關鍵選擇。這意味着你不只是比較這兩個選擇：

div 
#firstDiv 

但是你比較這兩個選擇：

#container > div:not(:last-of-type) 
#firstDiv 

這裏，第一選擇是更具體的，因爲它有：

• 一個ID選擇，#container

• A型（元素）選擇器，div;和

• 甲僞類，在這種情況下是:last-of-type;所述:not()僞類本身不朝向選擇特異性

計數，而第二選擇器僅包括ID的。請注意，第一個示例中的組合器本身如>不計入選擇器特性。

有一個在Selectors spec整個截面覆蓋如何計算選擇特異性。