：针对所有子元素的第一个孩子

Question

我有一个ID为“navigation”的无序列表和一些子列表项元素。

我正在尝试仅使用:first-child选择第一个项目，但它将我使用的CSS应用于所有其他列表项。

ul#navigation li:first-child{
    background:#fff;
}

因此，重申一下：这会给每个列表项目一个白色背景。我只想选择第一个元素。出了什么问题？

Answer 1

根据评论，您的问题是您的标记如下所示：

<ul id="navigation">
    <a href="http://google.com">
        <li>Google</li>
    </a>
</ul>

请注意此模型下每个li的{​​{1}}怎么样。我建议你使用更合适的结构，在你的列表项中嵌套你的锚。如果希望锚点填充列表项，请将其显示设置为阻止：

:first-child

随附CSS：

<ul id="navigation">
    <li><a href="http://google.com">Google</a></li>
</ul>

完成这些结构更改后，您的选择器应定位到第一个列表项：

#navigation a { display: block }