Présentation des classifications courantes des sélecteurs CSS

Classification commune des sélecteurs CSS et exemples de codes spécifiques

Le sélecteur CSS est un outil utilisé pour sélectionner des éléments de documents HTML et leur attribuer des styles spécifiques. Maîtriser les différents types de sélecteurs CSS est crucial pour rédiger des feuilles de style CSS efficaces. Voici les catégories de sélecteurs CSS courantes et des exemples de code spécifiques.

1. Sélecteur d'éléments
   Le sélecteur d'éléments est le sélecteur CSS le plus courant. Il sélectionne les éléments en sélectionnant leurs noms de balises. Par exemple, pour sélectionner tous les éléments de paragraphe, vous pouvez utiliser le style suivant :

p {
  color: blue;
}

2. Sélecteur de classe (Sélecteur de classe)
   Le sélecteur de classe ajoute l'attribut de classe à l'élément HTML et utilise un point pour l'identifier. Il permet d'appliquer le même style à plusieurs éléments du document. Les exemples sont les suivants :

.button {
  background-color: red;
}

Comment l'utiliser en HTML :

<button class="button">Click me</button>

3. Sélecteur d'ID (Sélecteur d'ID)
   Le sélecteur d'ID ajoute l'attribut id à l'élément HTML et utilise le signe dièse pour l'identifier. Il convient aux situations où un seul élément doit avoir un style spécifique appliqué. L'exemple de code est le suivant : Comment utiliser

#header {
  background-color: yellow;
}

en HTML :

<header id="header">This is the header</header>

4. Child Selector (Child Selector)
   Le sélecteur enfant peut sélectionner les éléments enfants directs d'un élément. Il est identifié par le signe supérieur à (>). Le code suivant sélectionne l'étendue de l'élément enfant direct de tous les éléments de paragraphe et définit la couleur de la police sur rouge :

p > span {
  color: red;
}

<p>This is a <span>red</span> text.</p>

5. Sélecteur descendant (Sélecteur descendant)
   Le sélecteur descendant peut sélectionner tous les éléments descendants d'un élément. Il est représenté par des espaces. Le code suivant sélectionne les éléments span à l'intérieur de tous les éléments de paragraphe et définit la couleur d'arrière-plan sur gris :

p span {
  background-color: gray;
}

<p>This is a <span>gray</span> text.</p>

6. Sélecteur de frères et sœurs adjacents (sélecteur de frères et sœurs adjacents)
   Le sélecteur de frères et sœurs adjacents peut sélectionner l'élément frère immédiatement derrière un élément. Il est identifié par un signe plus (+). Le code suivant sélectionne les éléments p qui suivent immédiatement tous les éléments h2 et définit la couleur de la police sur bleu :

h2 + p {
  color: blue;
}

<h2>Heading 2</h2>
<p>This paragraph is immediately following the h2 element.</p>

7. Sélecteur universel (Sélecteur universel)
   Le sélecteur universel peut sélectionner tous les éléments du document HTML. Il est représenté par un astérisque (*). Le code suivant sélectionne tous les éléments de la page et définit la bordure sur 1 pixel :

* {
  border: 1px solid black;
}

Les catégories ci-dessus sont des catégories de sélecteur CSS courantes et leurs exemples de codes. Comprendre les différents types de sélecteurs et leur utilisation vous aidera à être plus flexible et précis lors de la rédaction de feuilles de style CSS. Gardez à l'esprit que la combinaison et l'imbrication de sélecteurs sont également possibles en utilisant des sélecteurs CSS pour une sélection d'éléments et une définition de style plus spécifiques.

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!