Analyse détaillée des fonctionnalités et avantages des sélecteurs avancés CSS

Analyse approfondie des fonctionnalités et des avantages des sélecteurs avancés CSS

Introduction :
CSS est une partie essentielle du développement Web. CSS peut être utilisé pour ajouter du style et de la mise en page aux pages Web. Le sélecteur est une partie très importante du CSS, qui détermine quels éléments de la page Web appliquent les règles CSS. En CSS, nous connaissons les sélecteurs de base, les sélecteurs hiérarchiques, les sélecteurs de pseudo-classes, etc. En plus de ces sélecteurs courants, CSS propose également des sélecteurs avancés. Cet article analysera en profondeur les caractéristiques et les avantages des sélecteurs avancés CSS et fournira des exemples de code spécifiques.

1. Sélecteur d'attribut
Le sélecteur d'attribut est un sélecteur qui peut sélectionner des éléments via leurs attributs. Il peut sélectionner les éléments requis en fonction de leurs valeurs d'attribut. Les sélecteurs d'attributs ont les formes suivantes :

1. [attribut] : sélectionnez des éléments avec des attributs spécifiés
2. [attribute=value] : sélectionnez des éléments avec des valeurs d'attribut spécifiées
3. [attribute~=value] : sélectionnez des éléments avec des attributs spécifiés. avec des valeurs d'attribut. La valeur d'attribut est constituée de plusieurs valeurs séparées par des espaces.
4. [attribut|=valeur] : Sélectionnez les éléments avec la valeur d'attribut spécifiée ou commençant par la valeur d'attribut spécifiée. "-"
5. [attribute^=value] : Sélectionnez les éléments commençant par la valeur d'attribut spécifiée
6. [attribute$=value] : Sélectionnez les éléments se terminant par la valeur d'attribut spécifiée
7. [attribute*=value] : Sélectionnez les éléments contenant le attribut spécifié Élément de valeur

Exemple de code :

/* 选择所有具有title属性的元素 */
[title] {
  color: blue;
}

/* 选择具有title属性且属性值为"example"的元素 */
[title="example"] {
  background-color: yellow;
}

/* 选择具有class属性且属性值包含"box"的元素 */
[class~="box"] {
  border: 1px solid black;
}

/* 选择具有id属性且属性值以"container"开头的元素 */
[id^="container"] {
  background-color: gray;
}

/* 选择具有href属性且属性值以".com"结尾的a元素 */
a[href$=".com"] {
  color: green;
}

/* 选择具有src属性且属性值包含"logo"的img元素 */
img[src*="logo"] {
  width: 100px;
  height: 100px;
}

2. Sélecteur de pseudo-classe structurelle
Le sélecteur de pseudo-classe structurelle est un sélecteur qui sélectionne les éléments en fonction de leur relation de position dans le document. Il peut sélectionner le premier élément enfant, le dernier élément enfant, le nième élément enfant, etc. Les sélecteurs de pseudo-classes structurelles ont les formes suivantes :

1. :first-child : Sélectionnez le premier élément enfant de l'élément
2. :last-child : Sélectionnez le dernier élément enfant de l'élément
3. :nth-child(n) : Sélectionnez le nième sous-élément de l'élément. n peut être un nombre spécifique, un mot-clé (tel que "pair", "impair") ou une formule (telle que "2n", "3n+1")
4.  : premier- of-type : Sélectionnez le premier élément parmi tous les éléments du même type qui ont le même élément parent que cet élément
5. :last-of-type : Sélectionnez le dernier élément parmi tous les éléments du même type qui ont le même élément parent comme cet élément
6. :nth -of-type(n) : Sélectionnez le nième élément parmi tous les éléments du même type qui ont le même élément parent que l'élément
7. :nth-last-child(n) : Sélectionnez le nième élément enfant du dernier à l'élément
8. ; Un sélecteur est un sélecteur utilisé pour sélectionner une partie spécifique d'un élément plutôt que l'élément entier. Il peut sélectionner du contenu devant, derrière ou à une certaine position d'un élément, ou générer des effets spéciaux. Les sélecteurs de pseudo-éléments courants ont les formes suivantes :

::before : insérer le contenu généré avant le contenu de l'élément

::after : insérer le contenu généré après le contenu de l'élément

::first-letter : sélectionner le premier lettre du contenu de l'élément

1. ::first-line : Sélectionnez la première ligne du contenu de l'élément
2. ::selection : Le style appliqué lorsque le texte est sélectionné
3. ::placeholder : Sélectionnez le texte d'espace réservé du contrôle de formulaire
Exemple de code :

5. /* 选择第一个子元素，并设置颜色为红色 */
   li:first-child {
     color: red;
   }
   
   /* 选择最后一个子元素，并设置背景颜色为黄色 */
   li:last-child {
     background-color: yellow;
   }
   
   /* 选择偶数序号的子元素，并设置颜色为绿色 */
   li:nth-child(even) {
     color: green;
   }
   
   /* 选择第三个子元素，并设置字体大小为20px */
   li:nth-child(3) {
     font-size: 20px;
   }
   
   /* 选择第一个p元素，并设置边框为1px实线红色 */
   p:first-of-type {
     border: 1px solid red;
   }
   
   /* 选择最后一个p元素，并设置边框为1px实线蓝色 */
   p:last-of-type {
     border: 1px solid blue;
   }
   
   /* 选择li的倒数第二个子元素，并设置背景颜色为灰色 */
   li:nth-last-child(2) {
     background-color: gray;
   }
   
   /* 选择同类型元素中倒数第一个元素，并设置颜色为橙色 */
   span:nth-last-of-type(1) {
     color: orange;
   }

Résumé :
6. Grâce aux sélecteurs de pseudo-classes structurelles, aux sélecteurs d'attributs et aux sélecteurs de pseudo-éléments, nous pouvons sélectionner et traiter les éléments dans les pages Web de manière plus flexible et obtenir un contrôle de style plus fin. Ces sélecteurs avancés offrent aux développeurs davantage de choix et de puissantes capacités d'expression de style, rendant l'application du CSS dans le développement Web plus créative et flexible. Dans le développement réel, l’utilisation rationnelle de ces sélecteurs avancés peut améliorer considérablement l’efficacité du travail et la lisibilité du code.

(nombre de mots : 1500)

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!