Kann jemand erklären, warum der "nth-child" -Wähler eine höhere Priorität hat als "hover"?

Gestern lief ich in diesem: Einer meiner :hover -States funktioniert nicht mehr. Ich fand heraus, dass, wenn ich das ändern:Kann jemand erklären, warum der "nth-child" -Wähler eine höhere Priorität hat als "hover"?

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

dazu:

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

es wieder funktioniert.

Ich habe eine demo on jsfiddle erstellt, um beide Fälle anzuzeigen.

Kann jemand erklären, warum der :hover -Status vom Selektor überschrieben wird?

Quelle

2012-10-24 insertusernamehere

Die Selektoren haben die gleiche specificity, so dass die letzte Priorität hat.

Quelle

2012-10-24 18:44:09 Guffa

+1 Danke, genau das, was ich suchte. Ich dachte, dass es innerhalb der Pseudoklassen immer noch eine Art Hierarchie gibt. – insertusernamehere

@insertusernamehere: Nein, die einzige Pseudoklasse, die von der üblichen Berechnung ausgenommen ist, ist ': not()', die stattdessen die Spezifität ihres Arguments annimmt. Dies bedeutet, dass die Spezifität von ': not (E)' 'E' ist und nicht': not() '. – BoltClock

@BoltClock Ah, also gibt es mindestens eine Ausnahme. Danke für diese zusätzliche Information. – insertusernamehere

Um die gleiche Spezifität außer Kraft setzen Sie die Selektoren Kette

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

Quelle

2012-10-24 18:47:30

'div.item: nth-child (even): Hover' ist genug, um die Spezifität zu erhöhen - keine Notwendigkeit, nach Eltern auszuwählen. – BoltClock

@BoltClock danke, du hast Recht. Meine Platzierung am Ende des Stils in der Geige ließ es erscheinen, dass es spezifischer war. –

Kann jemand erklären, warum der "nth-child" -Wähler eine höhere Priorität hat als "hover"?

Antwort

Verwandte Themen