Pourquoi un sélecteur de classe remplace-t-il les styles de pseudo-classes de lien en CSS ?

Pourquoi le sélecteur .foo remplace-t-il les spécifications de style de lien ?

CSS applique des styles basés sur des règles de spécificité. Dans l'exemple de code, nous définissons les états lien, visité, survol et actif avec une spécificité égale (0 0 1 1). Cependant, le sélecteur .foo introduit une classe supplémentaire avec une spécificité légèrement plus élevée (0 0 2 1).

Mécanisme de remplacement

Lorsque plusieurs sélecteurs avec différents niveaux de spécificité s'appliquent à le même élément, le sélecteur ayant la spécificité la plus élevée remplace ceux de spécificité inférieure. Ici, .foo a:link et .foo a:visited ont une spécificité plus élevée que a:hover et a:active.

Par conséquent, le sélecteur .foo remplace le lien et les sélecteurs de pseudo-classe dynamiques, provoquant des liens avec la classe .foo apparaît en vert quels que soient les autres styles appliqués.

Possible Correctifs

Pour garantir que l'état de survol remplace le sélecteur .foo, on peut :

1. Ajouter un sélecteur .foo plus spécifique

   Augmentez la spécificité du sélecteur .foo en ajoutant une autre classe. Par exemple :

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

   Cela garantit que la classe .link remplace le sélecteur .foo, permettant à l'état de survol de prendre effet.

2. Utilisez le !important Déclaration

   Forcer les styles de lien et de survol pour remplacer le sélecteur .foo à l'aide du !important déclaration :

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

   Cela "verrouille" efficacement la propriété color, empêchant les autres sélecteurs de la modifier.

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!