Quels sont les sélecteurs CSS3 ?

Les sélecteurs CSS3 font partie de CSS3 et sont utilisés pour sélectionner des éléments dans les documents HTML. Ils peuvent sélectionner des éléments en fonction de critères tels que leur type, leurs attributs, leur statut et leur emplacement.

Voici quelques sélecteurs CSS3 couramment utilisés et leurs exemples de code :

1. Sélecteur d'éléments :
   Sélectionnez les éléments par leurs noms.

   Exemple de code :

   p {
     color: red;
   }

   Le code ci-dessus sélectionnera tous les éléments <p></p> et définira leur couleur sur rouge. <p></p> 元素，并将它们的颜色设置为红色。

2. 类选择器（Class Selector）:
   通过元素的 class 属性来选择元素。

   示例代码：

   .highlight {
     background-color: yellow;
   }

   以上代码会选择所有带有 "highlight" 类的元素，并将它们的背景颜色设置为黄色。

3. ID 选择器（ID Selector）:
   通过元素的 id 属性来选择元素。

   示例代码：

   #main-title {
     font-size: 24px;
   }

   以上代码会选择具有 "main-title" id 的元素，并将其字体大小设置为 24 像素。

4. 属性选择器（Attribute Selector）:
   通过元素的属性值来选择元素。

   示例代码：

   input[type="text"] {
     border: 1px solid gray;
   }

   以上代码会选择所有 type 属性为 "text" 的 input 元素，并将它们的边框设置为灰色。

5. 伪类选择器（Pseudo-class Selector）:
   通过元素的特殊状态来选择元素，例如 :hover、:nth-child() 等。

   示例代码：

   a:hover {
     color: blue;
   }

   以上代码会选择当鼠标悬停在链接上时的 <a></a> 元素，并将其颜色设置为蓝色。

6. 伪元素选择器（Pseudo-element Selector）:
   通过元素的特殊位置来选择元素，例如 ::before、::after 等。

   示例代码：

   p::before {
     content: "Chapter: ";
     font-weight: bold;
   }

   以上代码会在每个 <p></p>

Sélecteur de classe :

Sélectionnez les éléments via leur attribut de classe.

🎜Exemple de code : 🎜rrreee🎜Le code ci-dessus sélectionnera tous les éléments avec la classe "highlight" et définira leur couleur d'arrière-plan sur jaune. 🎜🎜🎜🎜ID Selector :🎜Sélectionnez les éléments via leur attribut id. 🎜🎜Exemple de code : 🎜rrreee🎜Le code ci-dessus sélectionnera l'élément avec l'identifiant "titre principal" et définira sa taille de police sur 24 pixels. 🎜🎜🎜🎜Sélecteur d'attribut :🎜Sélectionnez les éléments en fonction de leurs valeurs d'attribut. 🎜🎜Exemple de code : 🎜rrreee🎜Le code ci-dessus sélectionnera tous les éléments d'entrée dont l'attribut type est "texte" et définira leurs bordures en gris. 🎜🎜🎜🎜Sélecteur de pseudo-classe : 🎜Sélectionnez des éléments grâce à leur statut spécial, tel que :hover, :nth-child(), etc. 🎜🎜Exemple de code : 🎜rrreee🎜Le code ci-dessus sélectionnera l'élément <a></a> lorsque la souris survole le lien et définira sa couleur sur bleu. 🎜🎜🎜🎜Sélecteur de pseudo-éléments : 🎜Sélectionnez les éléments via leurs positions spéciales, telles que ::before, ::after, etc. 🎜🎜Exemple de code : 🎜rrreee🎜Le code ci-dessus ajoutera un pseudo-élément avec le contenu "Chapitre : " devant chaque élément <p></p> et mettra sa police en gras. 🎜🎜🎜🎜Ceci n'est qu'une petite sélection de sélecteurs CSS3, il existe de nombreux autres sélecteurs disponibles pour une sélection plus spécifique. En utilisant ces sélecteurs de manière appropriée, vous pouvez sélectionner et styliser plus précisément les éléments de votre document HTML. 🎜

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!