Maison > interface Web > tutoriel CSS > Présentation des classifications courantes des sélecteurs CSS

Présentation des classifications courantes des sélecteurs CSS

PHPz
Libérer: 2024-01-13 14:40:16
original
1177 Les gens l'ont consulté

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;
}
Copier après la connexion
  1. 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;
}
Copier après la connexion

Comment l'utiliser en HTML :

<button class="button">Click me</button>
Copier après la connexion
  1. 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;
}
Copier après la connexion

en HTML :

<header id="header">This is the header</header>
Copier après la connexion
  1. 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;
}
Copier après la connexion
<p>This is a <span>red</span> text.</p>
Copier après la connexion
  1. 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;
}
Copier après la connexion
<p>This is a <span>gray</span> text.</p>
Copier après la connexion
  1. 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;
}
Copier après la connexion
<h2>Heading 2</h2>
<p>This paragraph is immediately following the h2 element.</p>
Copier après la connexion
  1. 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;
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal