Que sont les sélecteurs de combinaison ?-Problème commun-php.cn

Maison

Problème commun

Quels sont les sélecteurs de combinaison ?

百草

Oct 07, 2023 pm 01:18 PM

Sélecteur de combinaison

Les sélecteurs combinés incluent les sélecteurs descendants, les sélecteurs d'éléments enfants, les sélecteurs de frères et sœurs adjacents, les sélecteurs de frères et sœurs universels, les sélecteurs de groupe, les sélecteurs d'intersection, les sous-sélecteurs, les sélecteurs de pseudo-classe, les sélecteurs de pseudo-éléments, etc. Introduction détaillée : 1. Le sélecteur de descendants correspond aux éléments en sélectionnant les éléments descendants de l'élément. Il utilise des espaces pour indiquer la relation entre les éléments ; 2. Le sélecteur d'éléments enfants correspond aux éléments en sélectionnant les éléments enfants directs de l'élément ; > Le symbole ";" représente la relation entre les éléments ; 3. Le sélecteur de frère adjacent correspond aux éléments en sélectionnant l'élément frère suivant de l'élément, etc.

Quels sont les sélecteurs de combinaison ?

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

En CSS, combiner des sélecteurs est un moyen de sélectionner des éléments spécifiques en combinant plusieurs sélecteurs. En combinant les sélecteurs, nous pouvons sélectionner plus précisément les éléments à styliser. Ci-dessous, je présenterai quelques sélecteurs de combinaisons courants.

1. Sélecteur descendant :

Le sélecteur descendant fait correspondre les éléments en sélectionnant leurs éléments descendants. Il utilise des espaces pour indiquer les relations entre les éléments. Par exemple, pour sélectionner tous les éléments

situés à l'intérieur de l'élément

, vous pouvez utiliser le sélecteur suivant :

     div  p

Copier après la connexion

2 Sélecteur d'enfant :

Le sélecteur d'enfant sélectionne l'enfant direct de l'élément à correspondre. l'élément. Il utilise le symbole ">" pour indiquer les relations entre les éléments. Par exemple, pour sélectionner tous les éléments

directement à l'intérieur d'un élément

, vous pouvez utiliser le sélecteur suivant :

     div  >  p

Copier après la connexion

3. Sélecteur de frère adjacent :

Le sélecteur de frère adjacent sélectionne le prochain frère de l'élément pour correspondre au élément. Il utilise le symbole « + » pour indiquer les relations entre les éléments. Par exemple, pour sélectionner tous les éléments

situés après l'élément

, vous pouvez utiliser le sélecteur suivant :

     h1  +  p

Copier après la connexion

4. . Il utilise le symbole « ~ » pour indiquer les relations entre les éléments. Par exemple, pour sélectionner tous les éléments

situés après l'élément

, vous pouvez utiliser le sélecteur suivant :

     h1  ~  p

Copier après la connexion

5. Le sélecteur de groupe combine plusieurs sélections avec des sélecteurs de virgules pour sélectionner. tous les éléments qui correspondent à l’un des sélecteurs. Par exemple, pour sélectionner tous les éléments

, vous pouvez utiliser le sélecteur suivant :

     h1,  p

Copier après la connexion

6. Sélecteur d'intersection :

Le sélecteur d'intersection correspond aux éléments en satisfaisant plusieurs sélecteurs en même temps. Il utilise des espaces pour regrouper plusieurs sélecteurs. Par exemple, pour sélectionner tous les éléments avec à la fois les classes « rouge » et « gras », vous pouvez utiliser le sélecteur suivant :

     .red.bold

Copier après la connexion

7 Sélecteur enfant :

Le sélecteur enfant correspond en sélectionnant les éléments enfants de l'élément element. Il utilise le symbole ">" pour indiquer les relations entre les éléments. Par exemple, pour sélectionner tous les éléments enfants directs

situés à l'intérieur de l'élément

, vous pouvez utiliser le sélecteur suivant :

     div  >  p

Copier après la connexion

8 :

Le sélecteur de pseudo-classe est utilisé pour la sélection A. état ou position spécifique d’un élément. Ils commencent par deux points : : et sont ajoutés à la fin du sélecteur. Par exemple, pour sélectionner tous les éléments en survol, vous pouvez utiliser le sélecteur suivant :