Warum überschreibt ein Klassenselektor Link-Pseudoklassenstile in CSS?

Warum überschreibt der .foo-Selektor Linkstilspezifikationen?

CSS wendet Stile basierend auf Spezifitätsregeln an. Im Beispielcode definieren wir die Status „Link“, „Besucht“, „Hover“ und „Aktiv“ mit gleicher Spezifität (0 0 1 1). Der .foo-Selektor führt jedoch eine zusätzliche Klasse mit etwas höherer Spezifität ein (0 0 2 1).

Override-Mechanismus

Wenn mehrere Selektoren mit unterschiedlichen Spezifitätsstufen gelten Wenn Sie dasselbe Element verwenden, überschreibt der Selektor mit der höchsten Spezifität die Selektoren mit der niedrigeren Spezifität. Hier haben .foo a:link und .foo a:visited eine höhere Spezifität als a:hover und a:active.

Daher überschreibt der .foo-Selektor den Link und die dynamischen Pseudoklassenselektoren und führt zu Links mit Die .foo-Klasse wird unabhängig von anderen angewendeten Stilen grün angezeigt.

Möglich Korrekturen

Um sicherzustellen, dass der Hover-Status den .foo-Selektor überschreibt, kann man:

1. Einen spezifischeren .foo-Selektor hinzufügen

   Erhöhen Sie die Spezifität des .foo-Selektors, indem Sie eine weitere Klasse hinzufügen. Zum Beispiel:

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

   Dadurch wird sichergestellt, dass die .link-Klasse den .foo-Selektor überschreibt, sodass der Hover-Status wirksam wird.

2. Verwenden Sie die !important Declaration

   Erzwingen Sie, dass die Link- und Hover-Stile die .foo-Datei überschreiben Selektor mithilfe der !important-Deklaration:

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

   Dadurch wird die Farbeigenschaft effektiv „gesperrt“ und verhindert, dass andere Selektoren sie ändern.

Das obige ist der detaillierte Inhalt vonWarum überschreibt ein Klassenselektor Link-Pseudoklassenstile in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!