Exemples courants de caractères génériques de sélecteur CSS à maîtriser

Pour maîtriser les exemples courants de caractères génériques de sélecteur CSS, des exemples de code spécifiques sont nécessaires

Les sélecteurs CSS sont une partie très importante du développement Web, qui nous permettent de sélectionner et de styliser des éléments HTML en fonction de différents attributs d'élément. Parmi les sélecteurs CSS, les caractères génériques sont un sélecteur très utile pouvant correspondre à tout type d'élément HTML. Dans cet article, nous présenterons les caractères génériques CSS couramment utilisés et fournirons des exemples de code spécifiques.

1. Caractère générique (*)

Le caractère générique "*" représente la sélection de tous les éléments HTML. Il peut être utilisé pour définir des styles globaux ou, dans certains cas, pour sélectionner des éléments spécifiques.

Exemple de code :

/*选择所有的HTML元素并设置字体颜色为红色*/
* {
  color: red;
}

2. Sélecteur de type (élément)

Le sélecteur de type fait référence à une méthode qui utilise le nom d'une balise HTML comme sélecteur. Habituellement utilisé pour sélectionner un certain type d'élément HTML.

Exemple de code :

/*选择所有的段落元素（<p>）并设置字体大小为16像素*/
p {
  font-size: 16px;
}

3. Sélecteur d'ID (#id)

Le sélecteur d'ID fait référence à une méthode qui utilise l'attribut ID d'un élément HTML comme sélecteur. L'attribut ID est unique et ne peut être utilisé qu'une seule fois dans un document HTML.

Exemple de code :

/*选择id为“myDiv”的元素并设置背景颜色为蓝色*/
#myDiv {
  background-color: blue;
}

4. Sélecteur de classe (.class)

Le sélecteur de classe fait référence à une méthode qui utilise l'attribut de classe d'un élément HTML comme sélecteur. Un élément HTML peut utiliser plusieurs classes et les classes peuvent être réutilisées dans plusieurs éléments HTML.

Exemple de code :

/*选择class为“myClass”的元素并设置字体样式为斜体*/
.myClass {
  font-style: italic;
}

5. Sélecteur d'attribut ([attribut])

Le sélecteur d'attribut fait référence à une méthode qui utilise les attributs des éléments HTML comme sélecteurs. Utilisez des sélecteurs d'attributs pour sélectionner des éléments HTML avec des attributs spécifiques.

Exemple de code :

/*选择具有src属性的图像元素，并设置边框为1像素实线*/
img[src] {
  border: 1px solid;
}

6. Sélecteur de valeur d'attribut ([attribut=valeur])

Le sélecteur de valeur d'attribut fait référence à la sélection d'éléments HTML avec des valeurs d'attribut spécifiques. Les éléments peuvent être sélectionnés par une combinaison de nom d'attribut et de valeur d'attribut.

Exemple de code :

/*选择所有href属性值为“https://example.com”的链接元素并设置颜色为绿色*/
a[href="https://example.com"] {
  color: green;
}

7. ancêtre descendant

Le sélecteur descendant permet de sélectionner les éléments descendants d'un élément. Les éléments descendants peuvent être des éléments imbriqués dans d’autres éléments.

Exemple de code :

/*选择ul元素内的所有li元素并设置字体粗体*/
ul li {
  font-weight: bold;
}

8. Sélecteur adjacent (préc + suivant)

Le sélecteur adjacent est utilisé pour sélectionner un élément immédiatement après un autre élément. L'élément sélectionné doit avoir le même élément parent que l'élément précédent.

Exemples de code :

/*选择紧接在h1元素后的p元素并设置颜色为红色*/
h1 + p {
  color: red;
}

Les exemples ci-dessus sont des exemples de caractères génériques de sélecteur CSS couramment utilisés. J'espère que ces exemples de code spécifiques pourront vous aider à mieux comprendre comment utiliser les sélecteurs CSS. Que vous sélectionniez des éléments globaux ou que vous sélectionniez des éléments en fonction de valeurs d'attributs spécifiques, la maîtrise de ces sélecteurs rendra votre travail de développement Web plus efficace.

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!