元素选择器如何比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整个截面覆盖如何计算选择特异性。