Comment utiliser les sélecteurs CSS pour une sélection non inclusive

CSS est un langage de feuille de style très puissant qui peut être utilisé pour contrôler l'apparence et la mise en page des documents HTML. En CSS, un sélecteur est un modèle permettant de sélectionner des éléments HTML. Utilisez des sélecteurs pour modifier facilement le style des éléments de votre document afin d'obtenir l'effet souhaité. En CSS, vous devez parfois sélectionner certains éléments mais en exclure d'autres. Cet article explique comment utiliser les sélecteurs CSS pour effectuer une sélection exclusive.

Pourquoi n’avez-vous pas besoin d’inclure des options ?

Dans les projets réels, il est parfois nécessaire de styliser des éléments d'une application de page Web entière, mais certains éléments spécifiques doivent être exclus. Dans ce cas, la sélection Exclure est utile pour exclure les éléments qui ne sont pas nécessaires, rendant ainsi le style plus réaliste.

Méthodes pour les sélecteurs CSS non incluses

Les sélecteurs CSS sont de nombreux types, et plusieurs d'entre eux peuvent être utilisés pour des éléments qui ne sont pas inclus dans le sélecteur. Cet article présentera les situations courantes suivantes.

1. Sélecteur de pseudo-classe Negate

Le sélecteur de pseudo-classe Negate peut sélectionner tous les éléments sauf un certain élément. Normalement, nous utilisons le formulaire de sélection :not().

Syntaxe spécifique :

:not(selector) {}

selector fait référence à l'élément à exclure.

Par exemple, nous voulons définir le style de tous les éléments p, mais nous voulons exclure des éléments p spécifiques dont la classe est hide. Le code est le suivant :

p:not(.hide) {
  color: red;
}

Dans cet exemple, nous utilisons le sélecteur :not(). pour exclure tous les éléments p qui ont un élément A p avec le nom de classe hide. De cette façon, la couleur du texte de tous les éléments p deviendra rouge, mais la couleur de l'élément p de la classe hide ne changera pas.

2. Enfants combinés avec des sélecteurs de pseudo-classe

Vous pouvez utiliser des éléments descendants combinés avec des sélecteurs de pseudo-classe pour sélectionner tous les éléments sous un certain élément, mais exclure des éléments spécifiques.

Syntaxe spécifique :

selector :not(selector) {}

Par exemple, nous souhaitons définir le style de tous les éléments p dans les divs, mais souhaitons exclure des éléments p spécifiques dont la classe est hide. Le code est le suivant :

div p:not(.hide) {
  color: red;
}

Dans cet exemple, nous utilisation : Le sélecteur not() et le sélecteur d'élément descendant excluent tous les éléments p avec le nom de classe hide. De cette façon, la couleur du texte de tous les éléments p de l'élément div deviendra rouge, mais la couleur de l'élément p de la classe hide ne changera pas.

3. Sélecteur universel

Le sélecteur universel (*) peut sélectionner tous les éléments, mais nous pouvons le combiner avec d'autres sélecteurs pour exclure certains éléments avec le sélecteur universel. Par exemple, nous voulons styliser les éléments avec une classe spécifique de box, mais exclure l'un des éléments avec la classe foo. Le code est le suivant :

.box:not(.foo) {
  background-color: blue;
}

Dans cet exemple, nous utilisons le sélecteur :not(), sélecteur de sélection universel. et un sélecteur de classe, excluant tous les éléments avec la classe foo. De cette façon, nous stylisons uniquement tous les éléments avec la classe box, à l'exception de la classe foo.

Résumé

Dans le développement réel, nous devons souvent exclure certains éléments pour répondre à des exigences de style spécifiques. Dans cet article, nous avons présenté trois façons de sélectionner les éléments qui ne contiennent pas :

• Utilisez le sélecteur de pseudo-classe de négation : not()
• Utilisez les éléments descendants combinés avec le sélecteur de pseudo-classe : not()
• Utilisez le sélecteur universel (*)

Les méthodes ci-dessus peuvent être utilisées pour contrôler le style des éléments HTML afin d'obtenir différents effets. Nous pouvons les utiliser de manière flexible en fonction des besoins.

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!