Combien de types de sélecteurs CSS existe-t-il ?

Le sélecteur CSS est un modèle utilisé pour sélectionner un élément dans un document HTML ou XML. Il permet aux développeurs d'obtenir des éléments dans la page via des sélecteurs tels que le nom de classe, l'ID, le nom de balise, etc., modifiant ainsi le style, le comportement et le contenu de l'élément. En CSS, les sélecteurs sont l'un des concepts les plus critiques et le cœur du CSS. Cet article présentera en détail les types de sélecteurs CSS.

1. Sélecteur de balises

Le sélecteur CSS le plus basique est le sélecteur de balises, qui sélectionne les éléments en fonction des balises HTML. Par exemple, le sélecteur CSS suivant sélectionnera tous les paragraphes en HTML :

p {
  color: red;
}

2. Sélecteur d'ID

Le sélecteur d'ID sélectionne les éléments en fonction de leur ID unique. En HTML, l'ID de chaque élément doit être unique. Par exemple, le sélecteur CSS suivant sélectionnera l'élément avec l'ID "my-element" :

#my-element {
  background-color: yellow;
}

3. Class Selector

Le sélecteur de classe nous permet de sélectionner des éléments en fonction de leur attribut de classe. En HTML, plusieurs éléments peuvent utiliser le même nom de classe. Par exemple, le sélecteur CSS suivant sélectionnera tous les éléments en HTML avec la classe "my-class" :

.my-class {
  font-size: 16px;
}

4. Sélecteur de frères et sœurs adjacents

Le sélecteur de frères et sœurs adjacents sélectionne les éléments en fonction des éléments frères qui suivent l'élément spécifié. Par exemple, le sélecteur CSS suivant sélectionnera tous les éléments p immédiatement après l'élément h1 :

h1 + p {
  color: blue;
}

5. Sélecteur d'élément enfant

Le sélecteur d'élément enfant sélectionne les éléments enfants directs de l'élément spécifié. Par exemple, le sélecteur CSS suivant sélectionnera tous les éléments enfants directs li dans l'élément ul :

ul > li {
  list-style: none;
}

6. Sélecteur descendant

Le sélecteur descendant sélectionnera tous les éléments descendants sous l'élément spécifié. Par exemple, le sélecteur CSS suivant sélectionnera tous les éléments li sous l'élément div :

div li {
  color: purple;
}

7. Sélecteur de caractères génériques

Le sélecteur de caractères génériques correspond à tous les éléments du document HTML. Par exemple, le sélecteur CSS suivant sélectionnera chaque élément en HTML :

* {
  margin: 0;
  padding: 0;
}

8. Sélecteur d'attribut

Le sélecteur d'attribut sélectionne les éléments en fonction de leurs valeurs d'attribut. Par exemple, le sélecteur CSS suivant sélectionnera tous les éléments dont l'attribut de classe contient "my" :

[class*="my"] {
  background-color: green;
}

Résumé :

Le sélecteur CSS peut sélectionner des éléments en fonction des balises, des classes, des identifiants, des attributs et d'autres caractéristiques dans le document HTML, et modifier son style. Cet article présente 8 sélecteurs CSS couramment utilisés qui peuvent être utilisés pour résoudre des problèmes de style courants. Il est important de noter que l'utilisation correcte des sélecteurs CSS peut rendre le code CSS des développeurs plus concis et plus clair.

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!