元素选择器如何比 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

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

div
#firstDiv

但是您正在比较这两个选择器：

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

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

• 一个 ID 选择器，#container

• 一个类型（元素）选择器，div；和

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

而第二个选择器仅包含一个 ID。请注意，在您的第一个示例中，像 > 这样的组合器本身不计入选择器特异性。

Selectors spec 中有一个完整的部分介绍了如何计算选择器特异性。

Answer 2

要了解 CSS 的特殊性，请阅读 The Specificity Wars。还有一个方便的参考表：

因此，像#foo 这样的选择器将具有1,0,0 特异性，而像p 这样的元素选择器将具有0,0,1 特异性。在这两者中，ID 选择器将“获胜”，因为 100 大于 1。

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