Qualcuno può spiegare perché il selettore "nth-child" ha una priorità più alta di "hover"?

Ieri mi sono imbattuto in questo: uno dei miei stati :hover ha smesso di funzionare. Ho scoperto che se cambio questo:Qualcuno può spiegare perché il selettore "nth-child" ha una priorità più alta di "hover"?

div.item {} 
div.item:hover {} 
div.item:nth-child(even) {}

a questo:

div.item {} 
div.item:nth-child(even) {} 
div.item:hover {}

funziona di nuovo.

Ho creato un demo on jsfiddle per mostrare entrambi i casi.

Qualcuno può spiegare perché lo stato :hover viene sovrascritto dal selettore?

fonte

2012-10-24 insertusernamehere

I selettori hanno lo stesso specificity, quindi quello che arriva per ultimo ha la priorità.

fonte

2012-10-24 18:44:09 Guffa

+1 Grazie, esattamente quello che stavo cercando. Ho pensato che ci sia ancora una sorta di gerarchia all'interno delle pseudo-classi. – insertusernamehere

@insertusernamehere: No, l'unica pseudo-classe che è esente dal solito calcolo è ': not()', che invece assume la specificità del suo argomento. Questo significa che la specificità di ': not (E)' è 'E', piuttosto che': not() '. – BoltClock

@BoltClock Ah, quindi c'è almeno un'eccezione. Grazie per questa informazione aggiuntiva. – insertusernamehere

per ignorare il pari specificità è possibile concatenare i selettori

div.container_2 > div:nth-child(even):hover { 
    background: red; 
}

fonte

2012-10-24 18:47:30

'div.item: nth-child (pari): hover' è sufficiente per aumentare la specificità - non è necessario selezionare per genitore. – BoltClock

@BoltClock grazie, sei corretto. Il mio posizionamento alla fine dello stile nel violino faceva sembrare che fosse più specifico. –

Qualcuno può spiegare perché il selettore "nth-child" ha una priorità più alta di "hover"?

risposta

Problemi correlati