5

据我了解，元素是最不具体的。（元素与 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/

4

2 回答 2

14

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

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

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

于 2012-02-16T12:25:33.523 回答
2

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

div
#firstDiv

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

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

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

  • 一个 ID 选择器，#container

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

  • 一个伪类，在这种情况下是:last-of-type; 伪类:not()本身不计入选择器特异性

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

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

于 2012-02-16T12:23:56.307 回答