Cet article vise à expliquer clairement comment utiliser le sélecteur CSS'nth-child pour sélectionner plusieurs éléments enfants spécifiques et appliquer des styles. Cet article présentera l'utilisation de base de ? nth-child ? et comment sélectionner plusieurs éléments enfants consécutifs ou non consécutifs à travers différentes techniques et combinaisons, et fournira un exemple de code correspondant.

nth-child est un sélecteur de pseudo-classe très puissant en CSS qui nous permet de sélectionner des éléments en fonction de leur position au sein de leurs éléments parents. Bien que nth-child(n) puisse sélectionner des éléments de manière flexible, l'utilisation directe de virgules pour séparer plusieurs nombres, comme nth-child(2, 3), n'est pas valide. Alors, comment pouvez-vous utiliser le sélecteur de nième enfant pour sélectionner plusieurs éléments??

Sélectionnez plusieurs éléments enfants consécutifs

La méthode la plus simple consiste à utiliser des virgules pour connecter plusieurs sélecteurs de nième enfant. Par exemple, pour sélectionner les 2ème et 3ème éléments

sous l'élément parent div.modal-content, vous pouvez écrire?:

 div.modal-content > p:nth-child(2),
div.modal-content > p:nth-child(3) {
  couleur de fond?: rouge?;
}

Ce code définit la couleur d'arrière-plan des 2e et 3e éléments

sur rouge.

Exemple:

Considérez la structure HTML suivante?:

 <div class="modal-content">
  <span class="close-button">Exemple de bouton</span>
  <p>élément?2</p>
  <p>élément 3</p>
  <p>élément 4</p>
  <p>élément 5</p>
  <p>élément 6</p>
</div>

Après avoir appliqué le CSS ci-dessus, seule la couleur d'arrière-plan de "Element 2" et "Element 3" deviendra rouge. Notez que la balise est également comptée car c'est également un élément enfant de div.modal-content.

Sélectionnez plusieurs éléments enfants non contigus

De même, vous pouvez utiliser des virgules pour connecter plusieurs sélecteurs de nième enfant afin de sélectionner des éléments enfants non consécutifs. Par exemple, pour sélectionner les 3ème et 5ème éléments

, vous écrivez?:

 div.modal-content > p:nth-child(3),
div.modal-content > p:nth-child(5) {
  couleur de fond?: rouge?;
}

Ce code définit la couleur d'arrière-plan des 3ème et 5ème éléments

sur rouge.

Exemple:

En continuant à utiliser la structure HTML ci-dessus, après avoir appliqué le CSS ci-dessus, seule la couleur d'arrière-plan de ? élément 3 ? et ? élément 5 ? passera au rouge.

Utiliser le sélecteur nième enfant (an b)

nth-child(an b) est une utilisation plus avancée, où a et b sont des nombres entiers. n représente les nombres naturels commen?ant à 0 (0, 1, 2, 3, ...). Cette expression vous permet de sélectionner des éléments d'un motif.

Par exemple, nth-child(2n) sélectionnera tous les éléments pairs (2, 4, 6, ...), tandis que nth-child(2n 1) sélectionnera tous les éléments impairs (1, 3, 5, ...).

Pour sélectionner un ensemble contigu d’éléments, vous pouvez utiliser plusieurs sélecteurs de nième enfant ensemble. Par exemple, pour sélectionner les éléments 2 à 4, vous pouvez écrire :

 div.modal-content > p:nth-child(2),
div.modal-content > p:nth-child(3),
div.modal-content > p:nth-child(4) {
  couleur de fond?: rouge?;
}

Bien que nth-child(an b) lui-même ne puisse pas sélectionner directement plusieurs éléments consécutifs, il peut être combiné avec d'autres sélecteurs pour obtenir des modèles de sélection plus complexes.

Choses à noter

• Le sélecteur de nième enfant sélectionne un élément en fonction de sa position au sein de son parent, ce qui signifie que si le parent contient des éléments enfants de types différents, ils seront tous comptés.
• Le sélecteur de nième enfant commence à compter à partir de 1 et non de 0.
• Le sélecteur de nième enfant est sensible à la casse.

Résumer

Bien que le sélecteur de nième enfant lui-même ne puisse pas utiliser directement plusieurs nombres séparés par des virgules pour sélectionner des éléments, vous pouvez sélectionner plusieurs éléments en connectant plusieurs sélecteurs de nième enfant avec des virgules ou en utilisant l'expression nième enfant (an b). Comprendre comment fonctionne nth-child et comment le combiner avec d'autres sélecteurs peut vous aider à contr?ler les styles CSS plus précisément.

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!