Pourquoi mon sélecteur de Nième enfant applique-t-il des styles à tous les éléments au lieu d'un seul ?

Pourquoi le sélecteur de nième enfant ne fonctionne-t-il pas ?

Le sélecteur de nième enfant est un outil puissant pour cibler des éléments spécifiques au sein d'un groupe de frères et sœurs. Cependant, il est important de comprendre ses limites pour l'utiliser efficacement.

Problème : Toutes les icônes sociales apparaissant de la même manière

Considérez la situation suivante où le nième enfant est utilisé pour ajouter des images d'arrière-plan aux icônes sociales :

<code class="css">#social-links div:nth-child(1) { background-image: url('media/linkedin.svg'); }</code>

Comportement attendu : seule la première icône sociale doit avoir une image d'arrière-plan LinkedIn.
Comportement réel : toutes les icônes ont la même image d'arrière-plan.

Raison : compter les frères et sœurs et non les éléments

Le sélecteur de nième enfant compte le nombre de frères et sœurs de l'élément ciblé, pas les éléments eux-mêmes. Dans le code ci-dessus, il compte le nombre d'éléments enfants div de #social-links.

Dans ce cas, l'élément div.social-logo existe toujours en tant que seul enfant div de l'élément d'ancrage. Par conséquent, le nième enfant renvoie toujours 1, ce qui signifie que chaque élément reçoit la même image d'arrière-plan.

Solution : cibler les frères et sœurs de l'élément parent

Pour cibler un div.social spécifique -logo, nous devons modifier le sélecteur pour cibler les frères et sœurs de l'élément d'ancrage parent :

<code class="css">#social-links a:nth-child(1) div { background-image: url('media/linkedin.svg'); }</code>

En ciblant le nième enfant de l'élément d'ancrage, nous sélectionnons maintenant correctement l'élément div.social-logo prévu et appliquons l'image d'arrière-plan en conséquence.

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!