Pourquoi mon sélecteur de nième enfant ne fonctionne-t-il pas sur les icônes sociales ?

Le sélecteur de nième enfant ne fonctionne pas : pourquoi et comment y remédier

Le sélecteur de nième enfant est un outil puissant pour sélectionner des éléments en fonction de leur position au sein d'un élément parent. Cependant, il peut parfois être difficile de comprendre pourquoi le sélecteur ne fonctionne pas comme prévu.

Dans le cas du code fourni, le sélecteur nième enfant est utilisé pour appliquer différentes images d'arrière-plan aux icônes sociales dans le #social- liens div. Malgré la condition du nième enfant, toutes les icônes apparaissent identiques. Ce problème provient d'une mauvaise compréhension du fonctionnement du sélecteur.

Comment fonctionne le nième enfant

Le sélecteur du nième enfant compte les frères et sœurs, c'est-à-dire les éléments partageant le même élément parent. Dans le code HTML fourni, chaque div.social-logo est le seul enfant de sa balise d'ancrage . Par conséquent, le sélecteur de nième enfant ne compte qu'un seul élément, quelle que soit sa valeur spécifiée.

Cependant, les balises d'ancrage dans #social-links sont sœurs les unes des autres. En conséquence, le sélecteur de nième enfant peut cibler efficacement des balises d'ancrage individuelles en utilisant la syntaxe suivante :

<code class="css">#social-links a:nth-child(1) div
#social-links a:nth-child(2) div
#social-links a:nth-child(3) div</code>

En ciblant les balises d'ancrage au lieu des éléments enfants div, le sélecteur de nième enfant peut désormais faire la différence entre les icônes sociales.

Solution

Pour résoudre le problème, remplacez les déclarations originales du nième enfant par ce qui suit :

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

#social-links a:nth-child(2) div {
    background-image: url(...);
}

#social-links a:nth-child(3) div {
    background-image: url(...);
}</code>

En ciblant les balises , le sélecteur de nième enfant appliquera correctement différentes images d'arrière-plan à chaque icône sociale comme prévu.

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!