p { color: red; }
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>
标签的元素,并把它们的文本颜色设为红色。class
属性中指定一个名称来选择元素。这种选择器使得我们可以选择具有相同类名的元素,并对它们应用相同的样式。例如,要选择所有具有类名为 highlight
的元素,可以使用如下的选择器:.highlight { background-color: yellow; }
.highlight
就是一个类选择器,它选择了所有具有 highlight
类名的元素,并将它们的背景色设置为黄色。id
属性中指定一个唯一的名称来选择元素。与类选择器不同,ID选择器只能选择一个元素,因为ID属性的值在一个HTML文档中必须是唯一的。例如,要选择ID为 header
的元素,可以使用如下的选择器:#header { font-size: 24px; }
#header
就是一个ID选择器,它选择了ID为 header
的元素,并将它们的字体大小设置为24像素。<div>
元素下的 <p>
元素,可以使用如下的选择器:div p { font-weight: bold; }
div p
就是一个后代选择器,它选择了所有 <div>
元素下的 <p>
元素,并将它们的字体设置为粗体。<div>
元素的直接子元素 <p>
,可以使用如下的选择器:div > p { color: blue; }
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 pour obtenir 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. 🎜
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!