Comment exclure une classe spécifique d'un sélecteur CSS ?

Comment exclure une classe spécifique d'un sélecteur CSS ?

Lorsque vous travaillez dans des environnements limités où JavaScript n'est pas disponible, CSS devient un outil essentiel pour un style dynamique. Un défi courant est de savoir comment empêcher certains éléments d'être affectés par une règle CSS spécifique lorsqu'ils ont également une autre classe.

Pour illustrer, considérons la tâche consistant à changer la couleur d'arrière-plan d'un élément. en survol sauf s'il possède également la classe "reMode_selected". Le code suivant illustre une tentative pour y parvenir :

<code class="css">/* Do not apply background-color */
.reMode_selected .reMode_hover:hover {
}

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

Cependant, cette approche échoue car elle cible les éléments avec les classes "reMode_hover" et "reMode_selected", que l'événement de survol soit ou non est déclenché. Pour résoudre ce problème, le sélecteur de classes multiples doit être utilisé sans espacement (sélecteur descendant) :

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

Ce sélecteur utilise la pseudo-classe ":not" pour exclure les éléments de classe "reMode_selected" style de couleur d'arrière-plan lors du survol des éléments "reMode_hover".

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!