Regole sovrapposte nei CSS: qual è la vera logica dietro?

Question

Si consideri il seguente:

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

Nel mio css, ci sono due regole che corrispondono per il selettore:

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

e la seconda è:

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

Il secondo la regola per impostare background-color su white non corrisponde. Penserei che sarebbe la regola a prevalere sulla regola precedente poiché è più specifica (celle con classe datepickerDisabled).

Answer 1

"0,0,2,2 vs 0,0,2,1 Il primo vince chiaramente."

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 

Se non si capisce questo formato, leggere http://www.w3.org/TR/CSS21/cascade.html#specificity:

specificità di un selettore è calcolata come segue:

• conteggio 1 se la dichiarazione è da è un 'stile' attributo piuttosto che una regola con un selettore, 0 altrimenti (= a) (In HTML, i valori dell'attributo "stile" dell'elemento sono regole del foglio di stile. Queste regole non hanno selettori , quindi a = 1, b = 0, c = 0, e d = 0.)
• contare il numero di attributi ID nel selettore (= b)
• contare il numero di altri attributi e pseudo-classi nel selettore (= c)
• conteggio il numero di nomi di elementi e di pseudo-elementi nel selettore (= d) La specificità si basa solo sulla forma del selettore . In particolare, un selettore del modulo "[id = p33]" viene contato come come selettore di attributo (a = 0, b = 0, c = 1, d = 0), anche se l'attributo id è definito come un "ID" nel DTD del documento sorgente.

La concatenazione dei quattro numeri a-b-c-d (in un sistema numerico con una base grande ) dà la specificità.

Se si preferisce un quadro ^source: