¿Cómo el selector de elementos es más específico que el selector de ids?

Question

Como yo entiendo, los elementos son menos específicos. (elemento vs id). Por favor, ayúdenme a comprender la especificidad de los selectores en general.

<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

Para comprender la especificidad de CSS, lea The Specificity Wars. Hay una hoja de referencia útil, también:

Por lo tanto, como un selector #foo tendría 1,0,0 especificidad, mientras que un selector de elementos como p tendría 0,0,1 especificidad. De estos dos, el selector de ID "ganaría" ya que 100 es mayor que 1.

A más específico (je) que también incluye la versión pseudo-elementos y pseudo-clases se pueden encontrar aquí: http://www.standardista.com/css3/css-specificity/

Answer 2

Al aplicar las reglas, la especificidad del selector se calcula contando todas selectores simples (sí mediante combinadores), y no sólo el selector de llave. Eso significa que no sólo está comparando estos dos selectores:

div 
#firstDiv 

Pero usted está comparando estos dos selectores:

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

Aquí, el primer selector es más específica porque tiene:

• Un selector de ID, #container

• Un selector de tipo (elemento), div; y

• Una pseudoclase, que en este caso es :last-of-type; :not() la misma pseudo-clase no cuenta para la especificidad del selector

Mientras que el segundo selector sólo se compone de un ID. Tenga en cuenta que los propios combinadores como > en su primer ejemplo no cuentan para la especificidad del selector.

Hay una sección completa en el Selectors spec que cubre cómo calcular la especificidad del selector.