元素选择器如何比id选择器更具体？

Question

据我所知，元素最不具体。 （元素vs 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。

可以在此处找到更具体（heh）版本，其中还包括伪元素和伪类：http://www.standardista.com/css3/css-specificity/

Answer 2

应用规则时，选择器特异性通过计算所有简单选择器（由任何组合器链接）计算，而不仅仅是键选择器。这意味着你不只是比较这两个选择器：

div
#firstDiv

但是你要比较这两个选择器：

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

这里，第一个选择器更具体，因为它具有：

• ID选择器#container

• 类型（元素）选择器div;以及

• 伪类，在本例中为:last-of-type; :not()伪类本身不计入选择器特异性

而第二个选择器只包含一个ID。请注意，第一个示例中的>组合器本身并不计入选择器特异性。

Selectors spec中有一整节介绍如何计算选择器的特异性。