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

CSS (Cascading Style Sheets) est un langage de feuilles de style utilisé pour la conception Web. Cela peut rendre le format des pages Web plus beau et plus standardisé. Le sélecteur est un concept très important en CSS, qui peut être utilisé pour sélectionner des éléments dans des pages Web. Cet article présentera la classification des sélecteurs CSS pour aider les lecteurs à mieux apprendre et maîtriser le CSS.

1. Sélecteur d'éléments

Le sélecteur d'éléments est le sélecteur le plus basique, qui peut sélectionner des éléments HTML dans les pages Web. La syntaxe d'un sélecteur d'élément est le nom d'un élément HTML. Par exemple, nous pouvons sélectionner tous les éléments de paragraphe avec le code CSS suivant :

p {
  color: red;
}

Ce code définira la couleur du texte de tous les éléments de paragraphe sur rouge.

2. Sélecteur de classe

Le sélecteur de classe fait référence à la classification des éléments d'une page Web qui ont les mêmes attributs mais des valeurs différentes, et sélectionne la même classe pour leur nom, et puis stylisez le sélecteur pour ce nom de classe. La forme syntaxique d'un sélecteur de classe est un point (.) suivi du nom de la classe. Par exemple, nous pouvons sélectionner des éléments avec le nom de classe « exemple » via le code CSS suivant :

.example {
  color: blue;
}

Ce code définira la couleur du texte de tous les éléments avec le nom de classe « exemple » sur bleu.

3. Sélecteur d'ID

Le sélecteur d'ID est utilisé pour identifier des éléments uniques dans une page Web, et chaque élément ne peut avoir qu'un seul ID. La syntaxe d'un sélecteur d'ID est le signe dièse (#) suivi du nom de l'ID. Par exemple, nous pouvons sélectionner l'élément avec l'ID "header" via le code CSS suivant :

#header {
  font-size: 20px;
}

Ce code définira la taille de police de l'élément avec l'ID "header" à 20px.

4. Sélecteur descendant

Le sélecteur descendant peut sélectionner des éléments descendants dans la page Web. La syntaxe d'un sélecteur descendant consiste à séparer les éléments parent et enfant par des espaces. Par exemple, nous pouvons sélectionner des éléments p dans tous les éléments div via le code CSS suivant :

div p {
  text-align: center;
}

Ce code centrera le texte des éléments p sous tous les éléments div.

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

Le sélecteur de frères et sœurs adjacents peut sélectionner deux éléments frères et sœurs adjacents qui remplissent les conditions. La forme syntaxique du sélecteur frère adjacent consiste à ajouter un signe plus (+) et l'élément sélectionné après l'élément qualifié. Par exemple, nous pouvons sélectionner l'élément ul adjacent après l'élément div via le code CSS suivant :

div + ul {
  list-style: none;
}

Ce code supprimera le style de liste de l'élément ul adjacent après l'élément div.

6. Sélecteur d'éléments enfants

Le sélecteur d'éléments enfants peut sélectionner des éléments enfants qui remplissent les conditions. La forme syntaxique d'un sélecteur d'élément enfant consiste à ajouter un signe supérieur à (>) et l'élément enfant sélectionné après l'élément qualifié. Par exemple, on peut sélectionner l'élément h1, un élément enfant de l'élément div, grâce au code CSS suivant :

div > h1 {
  font-weight: bold;
}

Ce code fera de la police de l'élément h1, un élément enfant du div élément, gras.

Pour résumer, les sélecteurs CSS incluent les sélecteurs d'éléments, les sélecteurs de classe, les sélecteurs d'ID, les sélecteurs descendants, les sélecteurs frères adjacents et les sélecteurs d'éléments enfants. L'utilisation correcte de ces sélecteurs peut rendre les styles CSS plus détaillés et plus flexibles. Apprendre et maîtriser l'utilisation de ces sélecteurs contribuera à améliorer l'efficacité et la qualité des effets CSS.

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!