为什么我的第 n 个子选择器不能处理社交图标？

第 n 个子级选择器不起作用：为什么以及如何修复

第 n 个子级选择器是一个强大的工具，用于根据它们在父元素中的位置。然而，有时会令人困惑为什么选择器没有按预期工作。

在提供的代码中，第 n 个子选择器用于将不同的背景图像应用于 #social- 中的社交图标。链接分区尽管存在第 n 个子条件，但所有图标都显示相同。这个问题源于对选择器工作原理的误解。

nth-child 的工作原理

nth-child 选择器对同级元素进行计数，即共享同一父元素的元素。在提供的 HTML 中，每个 div.social-logo 都是其锚点 标记的唯一子级。因此，第 n 个子选择器仅计算一个元素，无论其指定值如何。

但是，#social-links 中的锚标记彼此是同级的。因此，第 n 个子选择器可以使用以下语法有效地定位各个锚标记：

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

通过定位锚标记而不是 div 子元素，第 n 个子选择器现在可以区分

解决方案

要解决此问题，请将原始的第 n 个子级声明替换为以下内容：

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

通过定位使用 标签，第 n 个子选择器将按预期正确地将不同的背景图像应用于每个社交图标。

以上是为什么我的第 n 个子选择器不能处理社交图标？的详细内容。更多信息请关注PHP中文网其他相关文章！