Pourquoi `.foo a` remplace-t-il `a:hover` et `a:active` dans la spécificité CSS ?

Énigme de spécificité : pourquoi .foo un sélecteur remplace a:hover, a:active

La spécificité CSS dicte la manière dont les styles sont appliqués en fonction du sélecteur poids. Dans le problème donné, le sélecteur .foo a est en conflit avec a:hover et a:active.

Comprendre la spécificité

La spécificité est déterminée par le nombre de balises, de classes et des identifiants dans un sélecteur, chaque niveau ayant un poids spécifique. Dans ce cas, le tableau de spécificité fourni montre que .foo a:link et .foo a:visited ont une spécificité plus élevée (0 0 2 1) que a:hover et a:active (0 0 1 1).

Pourquoi .foo a remplace

Le sélecteur .foo a est plus spécifique qu'a:hover et a:active car il s'applique aux liens au sein des éléments avec la classe foo. Lorsqu'un élément rencontre plusieurs sélecteurs avec la même spécificité, le dernier style déclaré est appliqué.

Correction de .foo un sélecteur

Pour autoriser le a:hover et a: que les styles actifs soient prioritaires, le sélecteur .foo a doit être modifié pour avoir une spécificité moindre. Une solution possible est :

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

En ajoutant .foo avant le survol et les pseudo-classes actives, la spécificité reste supérieure à a:hover et a:active, garantissant que les styles de ces pseudo-classes sont appliqué dans les éléments avec la classe foo.

À emporter

La spécificité détermine la manière dont les styles CSS sont appliqués. Comprendre ce concept est crucial pour contrôler la priorité des styles et obtenir l'effet visuel souhaité.

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!