Comment utiliser le sélecteur CSS

Le sélecteur CSS (Cascading Style Sheets) est un outil de sélection d'éléments HTML. Les sélecteurs CSS vous permettent de styliser un élément HTML en fonction de son type, de son attribut, de son ID ou de sa classe. Les sélecteurs sont le fondement du CSS, et leur maîtrise est une étape importante dans la maîtrise du CSS.

Cet article présentera les sélecteurs CSS couramment utilisés et leur utilisation. Avant de commencer, vous devez comprendre quelques connaissances de base :

1. Syntaxe du sélecteur CSS : le sélecteur pointe vers l'élément HTML, suivi d'une paire d'accolades {}. À l'intérieur des accolades se trouve un ensemble de paires d'attributs et de valeurs, séparés par des points-virgules.
2. Les éléments HTML peuvent utiliser des noms de balises, des noms de classe (id) et des attributs comme sélecteurs.
3. Les éléments peuvent avoir plusieurs noms de classe, séparés par des espaces.
4. Les noms d'ID et de classe doivent suivre des règles de dénomination, telles que ne pas commencer par un chiffre, ne pas contenir de caractères spéciaux, etc.

Apprenons-en maintenant plus sur plusieurs sélecteurs CSS et comment les utiliser.

1. Sélecteur de balises

Le sélecteur de balises est le sélecteur CSS le plus simple. Il utilise le nom de balise de l'élément HTML pour définir le style. Le sélecteur de balise s'applique à tous les éléments de cette balise.

Par exemple, pour définir la couleur du texte rouge pour tous les paragraphes (p), vous pouvez utiliser le code suivant :

p {
  color: red;
}

2. Sélecteur de classe

Le sélecteur de classe sélectionne les éléments en ajoutant le nom de la classe dans la balise. Les noms de classes commencent par le symbole "."

Par exemple, le code suivant définira la couleur du texte sur rouge pour tous les éléments utilisant le nom de classe « ma-classe » :

.my-class {
  color: red;
}

En HTML, l'attribut class peut être appliqué à n'importe quel élément. Voici un exemple :

<div class="my-class">我是一个含有my-class类名的div元素</div>

3. ID Selector

ID Selector sélectionne les éléments en ajoutant le nom de l'ID dans la balise. Le nom de l'ID commence par le symbole "#".

Par exemple, le code suivant définira la couleur du texte d'un élément avec l'ID "my-id" sur bleu :

#my-id {
  color: blue;
}

En HTML, l'attribut id ne peut être appliqué qu'à un seul élément. Voici un exemple :

<div id="my-id">我是一个含有my-id ID名称的div元素</div>

4. Attribute Selector

Attribute Selector définit les styles en fonction des attributs d'un élément HTML. Ils permettent d'accéder aux propriétés d'un élément à l'aide de crochets [].

Par exemple, le code suivant définira la couleur du texte sur vert pour tous les éléments avec l'attribut « href » :

a[href] {
  color: green;
}

De plus, vous pouvez utiliser la valeur de l'attribut pour styler de manière plus granulaire. Par exemple, le code suivant définira la couleur du texte sur rouge pour tous les liens dont la valeur d'attribut « href » se termine par « .pdf » :

a[href$=".pdf"] {
  color: red;
}

Dans le code ci-dessus, le symbole "$=" indique que la valeur d'attribut se termine par une certaine valeur.

5. Sélecteur descendant

Le sélecteur descendant définit les styles en sélectionnant les éléments enfants d'un élément parent. Il utilise des espaces pour séparer chaque nom de balise.

Par exemple, le code suivant définira l'élément a dans tous les éléments div sur vert :

div a {
  color: green;
}

Dans le code ci-dessus, le caractère espace relie l'élément div et l'élément a l'un à l'autre.

6. Sélecteur d'intersection

Le sélecteur d'intersection sélectionne les éléments avec à la fois le nom de classe et le nom de balise spécifiés. Il est défini à l'aide de "." et du nom de la balise.

Par exemple, le code suivant définira la couleur du texte sur bleu pour tous les éléments qui ont un nom de classe "my-class" et un nom de balise "li":

li.my-class {
  color: blue;
}

Dans le code ci-dessus, le "li.my- sélecteur de classe" uniquement S'applique aux éléments portant à la fois les noms de classe "li" et "my-class".

Résumé :

Jusqu'à présent, nous avons découvert 6 sélecteurs CSS couramment utilisés. Comprendre les sélecteurs vous aidera à mieux positionner et développer des styles pour les éléments HTML. Différents sélecteurs nécessitent des structures HTML différentes, nous devons donc choisir le sélecteur approprié en fonction des besoins réels.

Les sélecteurs CSS sont un point de connaissance très important en CSS, et les maîtriser est une étape très importante pour les développeurs front-end. J'espère que cet article pourra vous aider.

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!