Pourquoi « .foo a:link » remplace-t-il « a:hover » dans la spécificité CSS ?

Puzzle sur la spécificité du sélecteur CSS : pourquoi .foo a:link remplace a:hover

Dans le domaine du CSS, la spécificité du sélecteur peut être un peu hallucinante . Plongeons dans un casse-tête intéressant qui montre comment le sélecteur .foo a:link peut remplacer les sélecteurs a:hover et a:active plus spécifiques.

Définition du problème

Considérez le code suivant :

<div class="foo">
    <a href="#">Example</a>
</div>

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

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

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

On s'attend à ce que le survol du lien le fasse passer au rouge, mais au lieu de cela, il reste vert. Ce comportement déroutant nécessite un examen plus approfondi de la cascade CSS.

Spécificité en CSS

La spécificité détermine l'ordre dans lequel les règles CSS sont appliquées à un élément. Une spécificité plus élevée l’emporte sur une spécificité plus faible. La formule suivante calcule la spécificité :

• Styles en ligne : 1, 0, 0, 0
• Sélecteurs d'ID : 0, 1, 0, 0
• Sélecteurs de classe : 0, 0, 1, 0
• Pseudo-classes et pseudo-éléments : 0, 0, 0, 1

Spécificité des sélecteurs dans le puzzle

Calcul de la spécificité de nos sélecteurs :

• a:link, a:visited , a:hover, a:active: 0, 0, 1, 1
• .foo a:link, .foo a:visited: 0, 0, 2, 1

Comme vous pouvez le constater, les sélecteurs .foo a:link et .foo a:visited ont une spécificité plus élevée que les a:hover et a:active sélecteurs (2 > 1).

Conclusion

Le La raison de ce comportement surprenant est que les sélecteurs .foo a:link et .foo a:visited ont une spécificité plus élevée que les sélecteurs a:hover et a:active. Cela signifie que même si a:hover et a:active sont plus spécifiques en termes de pseudo-classes, la spécificité de classe du sélecteur .foo l'emporte.

Pour corriger ce problème, le correctif suggéré dans le problème ( il est nécessaire de décommenter les règles .foo a:hover et .foo a:active). En ajoutant ces règles avec la même spécificité que les règles .foo a:link et .foo a:visited, les styles a:hover et a:active auront désormais priorité.

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!