Comment exclure des noms de classe spécifiques dans les sélecteurs CSS ?

Exclusion de noms de classe spécifiques dans les sélecteurs CSS

En CSS, il existe des cas où vous devrez peut-être exclure des noms de classe particuliers de vos sélecteurs. Ceci est particulièrement utile lorsque vous souhaitez appliquer des styles à plusieurs éléments, mais que certains d'entre eux ne doivent pas hériter de ces styles.

Un scénario courant consiste à exclure des éléments avec un nom de classe spécifique tout en appliquant des styles aux éléments avec un autre nom de classe. Considérons l'exemple 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>

Dans cet exemple, nous souhaitons appliquer une couleur d'arrière-plan aux éléments avec le nom de classe "reMode_hover" au survol. Cependant, nous ne souhaitons pas appliquer cette couleur si l'élément porte également le nom de classe "reMode_selected".

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

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

Bien que vous puissiez vous attendre à ce que la première règle fonctionne, ce n'est pas le cas. En effet, en CSS, l'espace entre les noms de classe indique le sélecteur de descendant. Ainsi, ".reMode_selected .reMode_hover" se traduit par "sélectionner les éléments .reMode_hover qui sont des descendants de .reMode_selected."

Pour exclure correctement les éléments "reMode_selected", nous devons utiliser le sélecteur "not()". Le CSS mis à jour serait :

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

Cette règle appliquera la couleur d'arrière-plan aux éléments .reMode_hover qui n'ont pas le nom de classe .reMode_selected. De ce fait, seul le premier lien recevra la couleur de fond au survol, tandis que le deuxième lien ne la recevra pas.

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!