Maison  >  Article  >  Quels sont les sélecteurs avancés de CSS ?

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

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌original
2023-12-04 09:56:521315parcourir

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.

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

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;
       }
  1. 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;
                  }
  2. :nth-child() Sélecteur de pseudo-classe : sélectionnez les éléments en fonction de leur position dans l'élément parent.
  3. p:nth-child(odd) {       
                       background-color: lightgray;
                     }
    :nth-of-type() sélecteur de pseudo-classe : similaire à :nth-child(), mais ne correspond qu'aux éléments d'un type spécifique.
  4. p:nth-of-type(2n+1) {       
                        font-weight: bold;
                       }
  5. :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;
                      }
  1. 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn