元素选择器如何比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特异性,请阅读特异性战争.还有一个方便的参考表:

因此,选择器就像#foo具有1,0,0特异性一样,而元素选择器则p具有0,0,1特异性.在这两个中,ID选择器将"赢" 100大于1.

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