Apprenez les sélecteurs de code CSS de base : repartez de zéro et familiarisez-vous avec la classification et l'application des sélecteurs

<p>

<p>Démarrage rapide avec les sélecteurs de base en code CSS : apprenez la classification et l'application des sélecteurs à partir de zéro

<p>CSS (Cascading Style Sheets) est un langage de balisage utilisé pour contrôler le style des documents HTML. En CSS, un sélecteur permet de sélectionner l'élément HTML auquel un style doit être appliqué. En termes simples, les sélecteurs sont utilisés pour spécifier quels éléments HTML seront affectés par les styles CSS.

<p>Il existe de nombreux types de sélecteurs, et vous pouvez choisir le sélecteur approprié en fonction de vos besoins et de vos scénarios d'application. Cet article présentera la classification de base et l'application des sélecteurs CSS à partir de zéro pour aider les lecteurs à démarrer rapidement avec le code CSS.

1. Sélecteur d'élément

<p>Le sélecteur d'élément est le sélecteur le plus simple et le plus basique, qui sélectionne l'élément correspondant via le nom de balise de l'élément HTML. Par exemple, pour sélectionner tous les éléments de paragraphe, vous pouvez utiliser le sélecteur suivant :

p {
    color: red;
}

<p>p dans le code ci-dessus est un sélecteur d'élément, qui sélectionne tous les <p></ code> balisez les éléments et définissez la couleur de leur texte sur rouge. <code>p 就是一个元素选择器，它选择了所有 <p> 标签的元素，并把它们的文本颜色设为红色。

2. 类选择器

<p>类选择器是通过在HTML元素的class属性中指定一个名称来选择元素。这种选择器使得我们可以选择具有相同类名的元素，并对它们应用相同的样式。例如，要选择所有具有类名为 highlight 的元素，可以使用如下的选择器：

.highlight {
    background-color: yellow;
}

<p>上述代码中的 .highlight 就是一个类选择器，它选择了所有具有 highlight 类名的元素，并将它们的背景色设置为黄色。

3. ID选择器

<p>ID选择器是通过在HTML元素的id属性中指定一个唯一的名称来选择元素。与类选择器不同，ID选择器只能选择一个元素，因为ID属性的值在一个HTML文档中必须是唯一的。例如，要选择ID为 header 的元素，可以使用如下的选择器：

#header {
    font-size: 24px;
}

<p>上述代码中的 #header 就是一个ID选择器，它选择了ID为 header 的元素，并将它们的字体大小设置为24像素。

4. 后代选择器

<p>后代选择器是通过选择HTML元素的后代元素来选择元素。后代元素是指被选元素的子元素、孙元素、曾孙元素等。例如，要选择所有 <div> 元素下的 <p> 元素，可以使用如下的选择器：

div p {
    font-weight: bold;
}

<p>上述代码中的 div p 就是一个后代选择器，它选择了所有 <div> 元素下的 <p> 元素，并将它们的字体设置为粗体。

5. 直接子元素选择器

<p>直接子元素选择器是通过选择HTML元素的直接子元素来选择元素。直接子元素是指被选元素的直接子元素，而非其后代元素。例如，要选择所有 <div> 元素的直接子元素 <p>，可以使用如下的选择器：

div > p {
    color: blue;
}

<p>上述代码中的 div > p 就是一个直接子元素选择器，它选择了所有 <div> 元素的直接子元素 <p>

Sélecteur de classe<p>
<p>Un sélecteur de classe sélectionne des éléments en spécifiant un nom dans l'attribut class d'un élément HTML. Ce sélecteur nous permet de sélectionner des éléments avec le même nom de classe et de leur appliquer le même style. Par exemple, pour sélectionner tous les éléments avec le nom de classe highlight, vous pouvez utiliser le sélecteur suivant :
rrreee🎜.highlight dans le code ci-dessus est un sélecteur de classe, qui All les éléments avec le nom de classe highlight sont sélectionnés et leur couleur d'arrière-plan est définie sur jaune. 🎜
🎜Sélecteur d'ID 🎜🎜🎜Le sélecteur d'ID sélectionne les éléments en spécifiant un nom unique dans l'attribut id de l'élément HTML. Contrairement aux sélecteurs de classe, les sélecteurs d'ID ne peuvent sélectionner qu'un seul élément car la valeur de l'attribut ID doit être unique dans un document HTML. Par exemple, pour sélectionner l'élément avec l'ID header, vous pouvez utiliser le sélecteur suivant : 🎜rrreee🎜#header dans le code ci-dessus est un sélecteur d'ID, qui sélectionne l'élément ID des éléments header et définissez leur taille de police sur 24 pixels. 🎜
🎜Sélecteur descendant🎜🎜🎜Le sélecteur descendant sélectionne les éléments en sélectionnant les éléments descendants des éléments HTML. Les éléments descendants font référence aux éléments enfants, aux éléments petit-fils, aux éléments arrière-petit-fils, etc. de l'élément sélectionné. Par exemple, pour sélectionner tous les éléments <p>
sous tous les éléments <div>, vous pouvez utiliser le sélecteur suivant : 🎜rrreee🎜div dans ce qui précède code p est un sélecteur descendant, qui sélectionne tous les éléments <p>
sous l'élément <div> et définit leur police en corps gras. 🎜
🎜Sélecteur d'élément enfant direct 🎜🎜🎜Le sélecteur d'élément enfant direct sélectionne les éléments en sélectionnant les éléments enfants directs des éléments HTML. Les éléments enfants directs font référence aux éléments enfants directs de l'élément sélectionné, et non à ses descendants. Par exemple, pour sélectionner tous les éléments <div> qui sont des éléments enfants directs <p>
, vous pouvez utiliser le sélecteur suivant : 🎜rrreee🎜 dans le ci-dessus, le code div > p est un sélecteur d'élément enfant direct, qui sélectionne tous les éléments enfants directs <p>
de tous les éléments <div>, et La couleur de leur texte est définie sur bleu. 🎜🎜En plus des cinq sélecteurs de base ci-dessus, il existe également d'autres types de sélecteurs tels que les sélecteurs de pseudo-classe, les sélecteurs d'attributs, etc. qui peuvent être utilisés pour sélectionner des éléments. Comprendre et maîtriser la classification et l'application de ces sélecteurs peut nous aider à mieux contrôler le style des éléments HTML. 🎜🎜En résumé, en apprenant et en appliquant des sélecteurs CSS, nous pouvons contrôler et gérer de manière flexible les styles des éléments HTML et réaliser une variété de mises en page et de conceptions de pages Web. J'espère que cet article pourra aider les lecteurs à démarrer rapidement avec le code CSS et à améliorer leurs capacités de conception et de développement Web. 🎜