Pourquoi mon sélecteur de nième enfant ne fonctionne-t-il pas sur les éléments imbriqués ?

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

Vous avez peut-être rencontré ce problème lors de l'utilisation du sélecteur de nième enfant pour à des fins de style. Malgré l'utilisation de ce sélecteur pour ajouter des images d'arrière-plan à différentes icônes sociales, vous remarquez que toutes les icônes affichent la même apparence. Cela signifie que quelque chose ne va pas dans votre code.

Exploration du problème

Le sélecteur de nième enfant est conçu pour cibler des éléments spécifiques en fonction de leur position parmi éléments frères et sœurs. Cependant, dans votre code, le sélecteur :

#social-links div:nth-child(1),
#social-links div:nth-child(2),
#social-links div:nth-child(3),
#social-links div:nth-child(4),

cible les éléments div qui sont des enfants de l'élément #social-links. Cependant, ces éléments div sont toujours le seul enfant de leurs éléments d'ancrage (a) respectifs. Par conséquent, le sélecteur de nième enfant ne peut pas les distinguer puisqu'ils sont tous le premier et unique enfant de leurs éléments d'ancrage.

L'approche correcte

Pour rectifier Pour résoudre ce problème, vous devez ajuster le sélecteur nième enfant pour cibler les éléments d'ancrage au lieu des éléments div. Ce faisant, vous pouvez spécifier quel élément d'ancrage doit recevoir une image d'arrière-plan particulière :

#social-links a:nth-child(1) div { 
   background-image: url('path/to/image1.svg'); 
}
#social-links a:nth-child(2) div { 
   background-image: url('path/to/image2.svg'); 
}
#social-links a:nth-child(3) div { 
   background-image: url('path/to/image3.svg'); 
}
#social-links a:nth-child(4) div { 
   background-image: url('path/to/image4.svg'); 
}

Cette structure de code modifiée garantit que chaque élément d'ancrage reçoit l'image d'arrière-plan prévue en fonction de sa position parmi les éléments d'ancrage frères.

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!