Cet article présente les compétences d'utilisation du sélecteur `:nth-child()` en CSS, en se concentrant sur la fa?on de sélectionner plusieurs éléments enfants à des positions spécifiques en même temps. Bien que `:nth-child()` lui-même ne prenne pas en charge la transmission directe de plusieurs valeurs, il peut obtenir des effets similaires en combinant plusieurs sélecteurs. Cet article fournira un exemple de code détaillé et des explications pour vous aider à mieux comprendre et appliquer le sélecteur `:nth-child()`.

Le sélecteur CSS :nth-child() est un outil puissant qui vous permet de sélectionner des éléments en fonction de leur position dans leur élément parent. Cependant, il ne prend pas directement en charge la spécification de plusieurs valeurs d'index dans un seul sélecteur :nth-child(). Cela signifie que vous ne pouvez pas sélectionner directement les deuxième et troisième éléments enfants comme nth-child(2, 3). Cependant, vous pouvez obtenir un effet similaire en combinant plusieurs sélecteurs.

Utiliser des sélecteurs séparés par des virgules

Le moyen le plus simple consiste à séparer plusieurs sélecteurs :nth-child() par des virgules (,). La virgule représente une relation ? ou ? en CSS, le navigateur appliquera donc le style à tous les éléments correspondant à l'un ou l'autre des sélecteurs.

Le code suivant montre comment utiliser cette méthode pour sélectionner les deuxième et troisième éléments enfants

sous l'élément parent div.modal-content et définir leur couleur d'arrière-plan sur rouge?:

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

Exemple de structure HTML

Afin de mieux comprendre le r?le du code CSS ci-dessus, voici un exemple de structure HTML correspondant?:

 <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>

Dans cet exemple, :nth-child(2) sélectionnera le deuxième élément

(le paragraphe avec le contenu ? élément 2 ?), et :nth-child(3) sélectionnera le troisième élément

(le paragraphe avec le contenu ? élément 3 ?).

Sélectionner des éléments non consécutifs

La méthode ci-dessus convient également à la sélection d'éléments discontinus. Par exemple, pour sélectionner les troisième et cinquième éléments

, vous utiliserez le code CSS suivant?:

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

Comment fonctionne?:nth-child()

Il est crucial de comprendre comment fonctionne :nth-child(). Il sélectionne le nième élément enfant sous l'élément parent, puis vérifie si cet élément correspond au sélecteur (dans ce cas, l'élément

). Si le deuxième élément enfant de l'élément parent n'est pas un élément

, :nth-child(2) ne sélectionnera aucun élément.

Utilisez :nth-of-type() comme alternative

Si vous souhaitez effectuer une sélection en fonction d'éléments enfants d'un type spécifique, vous pouvez utiliser le sélecteur :nth-of-type(). Le sélecteur :nth-of-type() ne prend en compte que les éléments enfants du type spécifié. Par exemple, p:nth-of-type(2) sélectionnera le deuxième élément

dans l'élément parent, en ignorant les autres types d'éléments enfants.

Résumer

Bien que le sélecteur :nth-child() lui-même ne prenne pas en charge la spécification directe de plusieurs valeurs d'index, en combinant plusieurs sélecteurs, vous pouvez facilement sélectionner plusieurs éléments enfants à des positions spécifiques. N'oubliez pas que le sélecteur :nth-child() sélectionne le nième élément enfant parmi tous les enfants, tandis que le sélecteur :nth-of-type() ne prend en compte que les éléments enfants du type spécifié. Choisir le sélecteur approprié en fonction de vos besoins spécifiques vous donne un contr?le plus précis sur le style CSS.

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!