Quels sont les sélecteurs avancés de CSS ?

Les sélecteurs avancés CSS incluent "sélecteur universel de frères et sœurs ~", "sélecteur d'attribut []", "sélecteur de pseudo-classe : not()", "sélecteur de pseudo-classe : nth-child()", "sélecteur de pseudo-classe" : nth-of-type()", "Sélecteur de pseudo-classe : premier-enfant et : dernier-enfant": 1. Sélecteur universel de frères et sœurs, sélectionne tous les éléments qui ont le même élément parent que l'élément spécifié, et tous les éléments qui suivez-le. Éléments similaires ; 2. Sélecteur d'attribut, vous pouvez sélectionner des éléments en fonction de leurs valeurs d'attribut, etc.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur Dell G3.

Les sélecteurs avancés CSS offrent une manière plus raffinée et flexible de sélectionner des éléments. Voici quelques sélecteurs avancés CSS courants :

1. Sélecteur frère général : utilisez un tilde (~) pour indiquer la sélection de tous les éléments frères qui ont le même élément parent. comme élément spécifié et le suivent immédiatement.

h2 ~ p {       
        color: red;
       }

2. Sélecteurs d'attributs : vous pouvez sélectionner des éléments en fonction de leurs valeurs d'attribut. Sélecteur d'attribut existant : [attr] attr$=value]

   Sélecteur contenant : [attr*=value]
   • :not() Sélecteur de pseudo-classe : sélectionne tous les éléments sauf l'élément spécifié.

   p:not(.intro) {       
                   color: red;
                 }

   Copier après la connexion
3. :nth-child() Sélecteur de pseudo-classe : sélectionnez les éléments en fonction de leur position dans l'élément parent.

4. p:nth-child(odd) {       
                      background-color: lightgray;
                    }

   Copier après la connexion
   :nth-of-type() sélecteur de pseudo-classe : similaire à :nth-child(), mais ne correspond qu'aux éléments d'un type spécifique.

5. p:nth-of-type(2n+1) {       
                       font-weight: bold;
                      }

   Copier après la connexion
:first-child et :last-child sélecteurs de pseudo-classe : sélectionnez respectivement le premier et le dernier élément enfant.

div p:first-child {       
                    font-weight: bold;
                  }

Copier après la connexion
4. Ces sélecteurs avancés peuvent aider les développeurs à sélectionner les éléments qui doivent être stylisés avec plus de précision, obtenant ainsi un contrôle de style plus flexible et plus précis.

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!