Warum überschreiben mein CSS „.foo a:link' und „.foo a:visited' „a:hover' und „a:active'?

Warum überschreiben .foo a:link, .foo a:visited Selector a:hover, a:active Selector in CSS?

Das in der Frage beschriebene unerwartete Verhalten ergibt sich aus den Spezifitätsregeln von CSS. Die Spezifität bestimmt die Priorität von CSS-Regeln, wenn mehrere Regeln für dasselbe Element gelten.

Spezifitätstabelle:

Selector	Specificity
a:link	0-0-1-1
a:visited	0-0-1-1
a:hover	0-0-1-1
a:active	0-0-1-1
.foo a:link	0-0-2-1
.foo a:visited	0-0-2-1

Wie Sie sehen können, ist .foo a:link und .foo a:visited haben aufgrund des zusätzlichen Klassenselektors eine etwas höhere Spezifität als a:hover und a:active .foo.

So funktioniert das Überschreiben der Spezifität:

Wenn mehrere Regeln mit unterschiedlichen Spezifitäten für dasselbe Element gelten, hat die Regel mit der höheren Spezifität Vorrang. In diesem Fall haben .foo a:link und .foo a:visited eine höhere Spezifität als a:hover und a:active, sodass ihre Stile die letzteren überschreiben.

Korrektur des Verhaltens:

Um zu verhindern, dass der Selektor .foo a:link und .foo a:visited überschrieben wird a:hover, a:active, Sie können die Spezifität des letzteren erhöhen. Dies kann durch Hinzufügen eines untergeordneten Selektors zu den Hover-/Aktivregeln erreicht werden:

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

Durch Hinzufügen der .foo-Klasse als untergeordneten Selektor erhöht sich die Spezifität der Hover-/Aktivregeln auf 0-0- 3-1, was höher ist als der von .foo a:link und .foo a:visited. Infolgedessen haben die Hover-/Aktiv-Stile Vorrang vor den Link-/Besuchten-Stilen und werden wirksam, wenn beide Pseudoklassen anwendbar sind.

Das obige ist der detaillierte Inhalt vonWarum überschreiben mein CSS „.foo a:link' und „.foo a:visited' „a:hover' und „a:active'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!