第 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中文网其他相关文章!