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

Spezifitätsrätsel: Warum .foo ein Selektor a:hover und a:active außer Kraft setzt

CSS-Spezifität bestimmt, wie Stile basierend auf dem Selektor angewendet werden Gewicht. In dem angegebenen Problem steht der .foo-A-Selektor im Konflikt mit a:hover und a:active.

Spezifität verstehen

Spezifität wird durch die Anzahl der Tags und Klassen bestimmt und IDs in einem Selektor, wobei jede Ebene eine bestimmte Gewichtung hat. In diesem Fall zeigt die bereitgestellte Spezifitätstabelle, dass .foo a:link und .foo a:visited eine höhere Spezifität (0 0 2 1) haben als a:hover und a:active (0 0 1 1).

Warum .foo a überschreibt

Der .foo a-Selektor ist spezifischer als a:hover und a:active, da es für Links innerhalb von Elementen mit der Klasse foo gilt. Wenn ein Element auf mehrere Selektoren mit derselben Spezifität trifft, wird der zuletzt deklarierte Stil angewendet.

Korrigieren von .foo eines Selektors

Um a:hover und a zuzulassen: Damit aktive Stile Vorrang haben, muss der .foo-A-Selektor so geändert werden, dass er eine geringere Spezifität aufweist. Eine mögliche Lösung ist:

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

Durch das Hinzufügen von .foo vor den Pseudoklassen „hover“ und „active“ bleibt die Spezifität höher als bei „a:hover“ und „a:active“, wodurch sichergestellt wird, dass die Stile für diese Pseudoklassen identisch sind wird innerhalb von Elementen mit der foo-Klasse angewendet.

Imbiss

Die Spezifität bestimmt, wie CSS-Stile erstellt werden angewendet werden. Das Verständnis dieses Konzepts ist entscheidend für die Kontrolle der Stilpriorität und das Erreichen des gewünschten visuellen Effekts.

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