Warum überschreiben Klassen- und Pseudoklassen-CSS-Selektoren reine Pseudoklassen-Selektoren beim Hover?

Warum CSS-Selektoren mit höherer Spezifität andere überschreiben: Der Fall der Linkdarstellung beim Hover

Einführung

Wenn in CSS mehrere Selektoren auf dasselbe Element angewendet werden, hat der Selektor mit der höchsten Spezifität Vorrang. Dieses Prinzip wird im folgenden Beispiel deutlich, in dem ein Selektor, der sowohl die Klasse als auch die Pseudoklasse (.foo a:link) verwendet, andere Selektoren überschreibt, die nur Pseudoklassen verwenden (z. B. a:hover).

Spezifität verstehen

Bedenken Sie Folgendes, um zu bestimmen, welcher Selektor die höchste Spezifität aufweist Metriken:

• Inline-Stil hat die höchste Spezifität (1)
• ID-Selektor hat höhere Spezifität als Klassen-, Element- oder Universal-Selektor (0)
• Klasse, Element oder universeller Selektor hat die gleiche Spezifität (1)

Erklärung des Beispiel

Im angegebenen HTML- und CSS-Code werden die folgenden Selektoren auf das Link-Element innerhalb des .foo-Div angewendet:

• .foo a:link, .foo a:visited (höhere Spezifität: Klasse und Pseudoklasse)
• a:link, a:visited (geringere Spezifität: nur Pseudoklasse)
• a:hover, a:active (gleiche Spezifität wie .foo a:link)

Basierend auf der bereitgestellten Spezifitätstabelle überschreibt .foo a:link a :hover, weil Ersteres aufgrund der Einbeziehung einer Klasse eine höhere Priorität hat.

Behebung des Problems Problem

Um das Problem zu beheben und schwebende Links rot erscheinen zu lassen, muss der .foo a:link-Selektor geändert werden, um sicherzustellen, dass er die in a:hover definierten Stile nicht überschreibt. Eine mögliche Lösung besteht darin, einen spezifischeren Selektor für Hover innerhalb des .foo-Kontexts hinzuzufügen:

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

Durch die Einführung eines spezifischeren Selektors hat dieser Vorrang vor dem weniger spezifischen .foo a:link-Selektor und ermöglicht die Hover-Verhalten, um die richtige Farbe anzuzeigen.

Das obige ist der detaillierte Inhalt vonWarum überschreiben Klassen- und Pseudoklassen-CSS-Selektoren reine Pseudoklassen-Selektoren beim Hover?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!