为什么我的第 N 个子选择器将样式应用于所有元素而不是仅一个？

为什么第 N 个子级选择器不起作用？

第 n 个子级选择器是一个强大的工具，用于定位一组同级中的特定元素。然而，了解其局限性以有效地使用它非常重要。

问题：所有社交图标出现相同

考虑以下情况，其中 nth-child用于向社交图标添加背景图像：

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

预期行为：只有第一个社交图标应该有 LinkedIn 背景图像。
实际行为：所有图标都具有相同的背景图像。

原因：计算兄弟元素而不是元素

第 n 个子元素选择器计算目标元素的兄弟元素数量，而不是元素本身。在上面的代码中，它计算了 #social-links 的 div 子元素的数量。

在这种情况下，div.social-logo 元素始终作为锚元素的唯一 div 子元素存在。因此，nth-child 始终返回 1，这意味着每个元素都会收到相同的背景图像。

解决方案：定位父元素的兄弟姐妹

定位特定的 div.social -logo 元素，我们需要修改选择器以定位父锚元素的兄弟元素：

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

通过定位锚元素的第 n 个子元素，我们现在可以正确选择预期的 div.social-logo 元素并应用相应的背景图像。

以上是为什么我的第 N 个子选择器将样式应用于所有元素而不是仅一个？的详细内容。更多信息请关注PHP中文网其他相关文章！