:first-child 针对所有子元素答案

【问题标题】：:first-child targeting all child elements:first-child 针对所有子元素
【发布时间】：2012-12-12 10:26:08
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

根据 cmets，您的问题是您的标记看起来像这样：

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

请注意在此模型下每个li 将如何成为: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;
}

【讨论】：