Pourquoi mon CSS `.foo a:link` et `.foo a:visited` remplace-t-il `a:hover` et `a:active` ?

Pourquoi .foo a:link, .foo a:visited Selector remplace-t-il a:hover, a:active Selector en CSS ?

Le comportement inattendu décrit dans la question découle des règles de spécificité du CSS. La spécificité détermine la priorité des règles CSS lorsque plusieurs règles s'appliquent au même élément.

Tableau de spécificité :

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

Comme vous pouvez le voir, .foo a:link et .foo a:visited ont une spécificité légèrement supérieure à a:hover et a:active en raison du sélecteur de classe supplémentaire .foo.

Comment fonctionne le remplacement de spécificité :

Lorsque plusieurs règles avec des spécificités différentes s'appliquent au même élément, la règle avec la spécificité la plus élevée est prioritaire. Dans ce cas, .foo a:link et .foo a:visited ont une spécificité plus élevée que a:hover et a:active, donc leurs styles remplacent ceux de ces derniers.

Corriger le comportement :

Pour empêcher le sélecteur .foo a:link, .foo a:visited de remplacer a:hover, a:active, vous pouvez augmenter la spécificité de cette dernière. Ceci peut être réalisé en ajoutant un sélecteur d'enfant aux règles de survol/active :

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

En ajoutant la classe .foo en tant que sélecteur d'enfant, la spécificité des règles de survol/active augmente à 0-0- 3-1, ce qui est supérieur à celui de .foo a:link et .foo a:visited. En conséquence, les styles survol/actif auront priorité et prendront effet sur les styles lien/visité lorsque les deux pseudo-classes sont applicables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!