Pourquoi mes icônes sociales utilisent-elles toujours le sélecteur « nième enfant » ?

Comprendre le sélecteur de nième enfant

Lorsque vous essayez d'appliquer des images d'arrière-plan uniques à différentes icônes sociales à l'aide du sélecteur de nième enfant, vous pouvez rencontrer des problèmes où toutes les icônes apparaissent le même. Cet article examinera la cause sous-jacente de ce problème et proposera une solution.

Le sélecteur de nième enfant est conçu pour sélectionner des éléments en fonction de leur position parmi leurs frères et sœurs, qui sont des éléments partageant le même élément parent. Cependant, dans la structure HTML fournie, chaque div.social-logo est le seul enfant de l'élément correspondant. Cela signifie que nth-child n'a qu'un seul élément à compter comme enfant, quel que soit le nombre de divs dans le conteneur #social-links.

Pour résoudre ce problème, vous pouvez plutôt cibler les éléments d'ancrage qui contiennent les icônes sociales utilisant le nième enfant. Dans cette structure HTML, il existe plusieurs éléments d’ancrage qui sont tous frères les uns des autres. Par conséquent, vous pouvez utiliser le sélecteur nième enfant pour cibler des éléments d'ancrage spécifiques et appliquer des images d'arrière-plan uniques en conséquence.

Voici un exemple de code CSS corrigé :

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

Cette approche révisée garantit que chaque L'élément d'ancrage est ciblé par le sélecteur de nième enfant, vous permettant d'appliquer efficacement des images d'arrière-plan uniques à chaque icône sociale.

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!