Comment utiliser le sélecteur de pseudo-classe :not pour sélectionner les styles CSS pour les éléments qui ne répondent pas aux critères

Comment utiliser le sélecteur de pseudo-classe :not pour sélectionner des styles CSS pour les éléments qui ne remplissent pas les conditions

En CSS, nous utilisons souvent des sélecteurs pour sélectionner des éléments qui répondent à des conditions spécifiques, puis leur appliquons des styles. Parfois, cependant, nous devons sélectionner des éléments qui ne répondent pas à certains critères et leur appliquer des styles différents. À ce stade, vous pouvez utiliser le sélecteur de pseudo-classe :not. Le sélecteur de pseudo-classe

:not nous permet d'en exclure certains éléments en spécifiant un ensemble de sélecteurs et de sélectionner uniquement les éléments qui ne correspondent pas à ces sélecteurs. Sa syntaxe de base est la suivante :

:not(selector)

où selector est un sélecteur CSS valide indiquant l'élément à exclure. Nous pouvons utiliser des sélecteurs de balises, des sélecteurs de classe, des sélecteurs d'ID ou d'autres types de sélecteurs.

Voici un exemple utilisant le sélecteur de pseudo-classe :not :

Code HTML :

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Code CSS :

.item {
  color: red;
}

li:not(.item) {
  color: blue;
}

Dans l'exemple ci-dessus, nous avons une liste non ordonnée où les trois premiers éléments de la liste ont des classes nommées "item ", les deux derniers éléments de la liste n'ont pas de nom de classe. Nous souhaitons appliquer une couleur de texte rouge aux trois premiers éléments de la liste et une couleur de texte bleue aux deux derniers éléments de la liste.

Nous pouvons obtenir cet effet en utilisant le sélecteur de pseudo-classe :not et en excluant les éléments portant le nom de classe ".item".

Dans tout le document, la couleur bleue du texte sera appliquée à tous les éléments li sauf ceux portant le nom de classe ".item". Et les éléments portant le nom de classe « .item » auront une couleur de texte rouge appliquée.

Avec le sélecteur de pseudo-classe :not, nous pouvons sélectionner de manière plus flexible les éléments qui ne répondent pas à des conditions spécifiques et leur appliquer des styles. Cela peut être très utile dans certaines situations, notamment lorsque nous devons effectuer un traitement spécial pour des éléments en dehors d'un type ou d'une condition spécifique.

Il est à noter que le sélecteur de pseudo-classe :not peut ne pas être compatible avec certaines anciennes versions de navigateurs. Par conséquent, des considérations en matière de tests et de compatibilité sont nécessaires lors de son utilisation. De plus, la complexité des sélecteurs peut avoir un impact sur les performances, soyez donc prudent lorsque vous les utilisez.

Pour résumer, en utilisant le sélecteur de pseudo-classe :not, nous pouvons sélectionner des éléments qui ne répondent pas à des conditions spécifiques et leur appliquer des styles différents. Sa syntaxe est simple et claire, facile à utiliser et peut offrir une meilleure flexibilité et convivialité dans certains cas.

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!