Pourquoi les sélecteurs CSS de classe et de pseudo-classe remplacent-ils les sélecteurs de pseudo-classe uniquement au survol ?

Pourquoi les sélecteurs CSS avec une spécificité plus élevée remplacent les autres : le cas de l'apparence des liens au survol

Introduction

En CSS, lorsque plusieurs sélecteurs s'appliquent au même élément, celui ayant la plus haute spécificité est prioritaire. Ce principe est évident dans l'exemple ci-dessous, où un sélecteur utilisant à la fois la classe et la pseudo-classe (.foo a:link) remplace les autres sélecteurs qui utilisent uniquement des pseudo-classes (par exemple, a:hover).

Comprendre la spécificité

Pour déterminer quel sélecteur a la spécificité la plus élevée, considérez ce qui suit métriques :

• Le style en ligne a la spécificité la plus élevée (1)
• Le sélecteur d'identifiant a une spécificité plus élevée que la classe, l'élément ou le sélecteur universel (0)
• Classe, élément, ou sélecteur universel a la même spécificité (1)

Explication du Exemple

Dans le code HTML et CSS donné, les sélecteurs suivants sont appliqués à l'élément de lien dans le div .foo :

• .foo a:link, .foo a:visité (spécificité supérieure : classe et pseudo-classe)
• a:lien, a:visité (spécificité inférieure : uniquement pseudo-classe)
• a:hover, a:active (même spécificité que .foo a:link)

Sur la base du tableau de spécificité fourni, .foo a:link remplace a : survolez car le premier a une priorité plus élevée en raison de son inclusion d'une classe.

Correction du Problème

Pour corriger le problème et faire apparaître les liens survolés en rouge, il est nécessaire de modifier le sélecteur .foo a:link pour s'assurer qu'il ne remplace pas les styles définis dans a:hover. Une solution possible consiste à ajouter un sélecteur plus spécifique pour le survol dans le contexte .foo :

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

En introduisant un sélecteur plus spécifique, il a priorité sur le sélecteur .foo a:link moins spécifique, permettant au comportement de survol pour afficher la bonne couleur.

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!