Superposición de reglas en CSS: ¿cuál es la verdadera lógica detrás?

Question

considerar lo siguiente:

<td class="datepickerDisabled"><a href="#"><span>12</span></a></td> 

En mi css, hay dos reglas que coincidir para que este selector:

tbody.datepickerDays td:hover { 
    border-radius: 2px; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
    background-color: #ddd; 
} 

Y la segunda es:

td.datepickerDisabled:hover { 
    background-color: white; 
} 

La segunda regla para establecer background-color a white no coincide. Creo que esa sería la regla que anula la regla anterior ya que es más específica (celdas con la clase datepickerDisabled).

Answer 1

"0,0,2,2 vs 0,0,2,1. El primero claramente gana".

tbody   Element  d 
.datepickerDays Class  c 
td    Element  d 
:hover   Pseudo-class c 
           = 0,0,2,2 

td     Element  d 
.datepickerDisabled Class  c 
:hover    Pseudo-class c 
           = 0,0,2,1 

Si usted no entiende este formato, lea http://www.w3.org/TR/CSS21/cascade.html#specificity:

especificidad de un selector se calcula como sigue:

• recuento de 1 si la declaración es de es un 'estilo' atributo en lugar de una regla con un selector, 0 de lo contrario (= a) (En HTML, los valores del atributo "estilo" de un elemento son reglas de hoja de estilo. Estas reglas no tienen selectores , entonces a = 1, b = 0, c = 0, y d = 0.)
• contar el número de ID atributos en el selector (= b)
• contar el número de otros atributos y pseudo-clases en el selector (= c)
• recuento el número de nombres de elementos y pseudo-elementos en el selector (= d) La especificidad se basa únicamente en la forma del selector . En particular, un selector de la forma "[id = p33]" se cuenta como un selector de atributo (a = 0, b = 0, c = 1, d = 0), incluso si el atributo id se define como "ID" en la DTD del documento fuente.

la concatenación de los cuatro números a-b-c-d (en un sistema de números con una base grande ) da la especificidad.

Si prefiere una imagen ^source: