元素选择器如何比id选择器更具体？ [英] How element selector is more specific than id selector?

问题描述

据我了解，元素是最不具体的。 （元素与ID）。
请帮助我大致了解选择器的特异性。

 < div id =容器> 
< div id = firstDiv> CONTAINER< / div>中的FIRST Div 
< div id = secondDiv> CONTAINER< / div>中的SECOND Div 
< / div> 
  

  body {
宽度：780px； 
保证金：20px自动； 
} 
＃容器> div：not（：last-of-type）{
 margin-bottom：0px; / *它比下面的ID选择器更具体？ * / 
} 
 #container {
 border：15px solid orange; 
 padding：10px; 
} 
 #firstDiv {
 margin：50px; / *这没有生效* / 
边框：5px稳定的blueviolet； 
} 
 #secondDiv {
 border：5px solid brown; 
} 
  

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

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

As I understand elements are least specific. (element vs id). Please help me in understanding the specificity of selectors generally.

<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/

解决方案

To understand CSS specificity, read The Specificity Wars. There’s a handy reference sheet, too:

So, a selector like #foo would have 1,0,0 specificity, while an element selector like p would have 0,0,1 specificity. Out of these two, the ID selector would "win" as 100 is greater than 1.

A more specific (heh) version which also includes pseudo-elements and pseudo-classes can be found here: http://www.standardista.com/css3/css-specificity/

这篇关于元素选择器如何比id选择器更具体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！