Comment exclure des classes spécifiques des sélecteurs CSS : un guide étape par étape

Exclusion d'une classe spécifique du sélecteur CSS

Lors du ciblage d'éléments avec plusieurs classes, il devient crucial de sélectionner ou d'exclure avec précision des classes spécifiques pour obtenir l'objectif souhaité. style. Cet article aborde un scénario courant dans lequel vous devez appliquer une couleur d'arrière-plan aux éléments d'une classe particulière, mais exclure ceux qui ont également une autre classe spécifique.

Exemple de scénario

Considérons le balisage HTML suivant :

<code class="html"><a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a></code>

L'objectif est d'appliquer une couleur d'arrière-plan au premier lien lorsque l'utilisateur le survole, mais d'exclure le deuxième lien de cet effet car il a la classe supplémentaire "reMode_selected ."

Tentative initiale

Vous pouvez d'abord essayer le CSS suivant :

<code class="css">.reMode_selected .reMode_hover:hover {}

.reMode_hover:hover {
   background-color: #f0ac00;
}</code>

Cependant, cela ne fonctionnera pas correctement car le premier La règle remplace la deuxième règle. Pour exclure correctement les éléments avec la classe "reMode_selected", utilisez le sélecteur de classes multiples :

<code class="css">.reMode_hover:not(.reMode_selected):hover {
   background-color: #f0ac00;
}</code>

Cette règle cible les éléments avec la classe "reMode_hover" mais exclut ceux qui ont également la classe "reMode_selected" lorsqu'ils sont survolés. De ce fait, le premier lien recevra la couleur de fond au survol, tandis que le deuxième lien restera inchangé.

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!