Warum überschreibt „.foo a:link' „a:hover' in der CSS-Spezifität?

Rätsel zur CSS-Selektorspezifität: Warum .foo a:link a:hover überschreibt

Im Bereich CSS kann die Selektorspezifität ein wenig umwerfend sein . Lassen Sie uns in ein interessantes Rätsel eintauchen, das zeigt, wie der .foo a:link-Selektor die spezifischeren a:hover- und a:active-Selektoren überschreiben kann.

Problemdefinition

Bedenken Sie den folgenden Code:

<div class="foo">
    <a href="#">Example</a>
</div>

a:link, a:visited {
    color: blue;
}

a:hover, a:active {
    color: red; 
}

.foo a:link, .foo a:visited {
    color: green;
}

Die Erwartung ist, dass der Mauszeiger über den Link rot wird, stattdessen aber grün bleibt. Dieses rätselhafte Verhalten erfordert eine genauere Untersuchung der CSS-Kaskade.

Spezifität in CSS

Die Spezifität bestimmt die Reihenfolge, in der CSS-Regeln auf ein Element angewendet werden. Eine höhere Spezifität setzt sich gegenüber einer niedrigeren Spezifität durch. Die folgende Formel berechnet die Spezifität:

• Inline-Stile: 1, 0, 0, 0
• ID-Selektoren: 0, 1, 0, 0
• Klassenselektoren: 0, 0, 1, 0
• Pseudoklassen und Pseudoelemente: 0, 0, 0, 1

Selektorspezifität im Puzzle

Berechnung der Spezifität unserer Selektoren:

• a:link, a:visited , a:hover, a:active: 0, 0, 1, 1
• .foo a:link, .foo a:visited: 0, 0, 2, 1

Wie Sie sehen können, haben die Selektoren .foo a:link und .foo a:visited eine höhere Spezifität als die a:hover und a:active Selektoren (2 > 1).

Fazit

Der Grund Denn das überraschende Verhalten besteht darin, dass die Selektoren .foo a:link und .foo a:visited eine höhere Spezifität aufweisen als die Selektoren a:hover und a:active. Das bedeutet, dass, obwohl a:hover und a:active in Bezug auf ihre Pseudoklassen spezifischer sind, die Klassenspezifität des .foo-Selektors siegt.

Um dieses Problem zu beheben, wird der im Problem vorgeschlagene Fix ( Das Auskommentieren der Regeln .foo a:hover und .foo a:active ist erforderlich. Durch das Hinzufügen dieser Regeln mit derselben Spezifität wie die Regeln .foo a:link und .foo a:visited haben die Stile a:hover und a:active nun Vorrang.

Das obige ist der detaillierte Inhalt vonWarum überschreibt „.foo a:link' „a:hover' in der CSS-Spezifität?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!