css - :first-child 针对所有子元素

Question

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

我试图只选择第一项，: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>

请注意在此模型下，everyli将如何成为 a 。:first-child我建议您使用更合适的结构，将锚点嵌套在列表项中。如果您希望锚点填满列表项，请将其显示设置为阻止：

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

使用随附的 CSS：

#navigation a { display: block }

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

/* > to target only immediate list items */
#navigation > li:first-child {
    background: red;
}