如何使用CSS选择前两个<li>元素

Question

您好，我想为相邻的前两个元素（one,two）应用CSS样式，它们紧邻在第一个<p>元素后面。

<div class="one">
    <ul>
        <p>
            <li>One</li>
            <li>Two</li>
        <p>
        <li>Four</li>
        <li>Five</li>
    </ul>
</div>

以下内容已应用于所有 4 个 li 元素。

.one ul p:nth-child(odd) ~ li {
    background: lightsteelblue;
}

- rajesh

---

你的标记无效。你不能将<p>标签作为<ul>的直接子元素。 - JJJ

为什么不用类来定义它们呢？ - Ed Heal

抱歉，更新了问题。我在我们的应用程序中有这样的标记。我们如何选择前两个li元素。 - rajesh

为什么不改一下呢？那个无效的标记会给你带来麻烦。 - putvande

无效标记的问题在于，浏览器在构建DOM时会尝试“修复”它，因此最终呈现的结果可能与标记所表示的不同，并且在不同的浏览器中可能会有所不同。例如，Chrome将其呈现为<ul><p></p><li>one</li><li>two</li><p></p>...，因此您无法选择<p>的子元素，因为它们最终不是<p>的子元素。 - JJJ

还要将你的CSS + HTML通过检查器进行检查。网上有免费的检查器。谷歌一下！ - Ed Heal

Answer 1

对于 ul p 内的前两个 li 元素，请尝试：

.one ul li:nth-child(-n+3){
    // your style
}

请在jsfiddle上查看。

而且，正如其他朋友提到的：您的标记无效。

如果您删除了p元素，请尝试：

.one ul li:nth-child(-n+2){
    // your style
}

在jsfiddle上查看

更新: 我的建议是使用另一个ul而不是p: 这样您就可以获得有效的标记和相同的结果：

HTML

<div class="one">
    <ul>
        <li>0</li>
        <li>
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>3</li>
            </ul>
        <li>
        <li>Four</li>
        <li>Five</li>
    </ul>
</div>

CSS：

.one ul {
    padding: 0;
    list-style-type: none;
}
.one ul ul li:nth-child(-n+2){
    // your style
}

更新后的jsfiddle

注意：根据您上次的评论，如果您只有两个特殊的li元素，为什么不简单地定义一个类名...<li class="bold"> 简单点吧。

ul li.bold {
    // your style
}

- Vahid Hallaji

---

谢谢hallaji，这个方法可行。但是如果我不知道与<p>标签相邻的"li"元素有多少个，我该如何管理呢？ - rajesh

如果我理解你的意思正确的话，一个和两个li都在p标签内而不是相邻的。如果在p标签内有超过2个li，我们会再次看到相同的效果，只有前两个元素会起作用。 - Vahid Hallaji

它们是相邻的。我的要求是为所有与第一个 <p> 标签相邻的 "li" 元素应用 CSS 样式。我不想为与第二个 <p> 相邻的 li 元素应用 CSS 样式。 - rajesh

Answer 2

这应该与IE8兼容（仅使用CSS 2.1选择器）：

li:first-child, li:first-child+li {
    color: blue;
}

- Nathan J.B.

---

这对于IE 7和8的兼容性更好。阅读起来有些困难，但如果你需要那个市场，它非常棒。 - Sandy Gifford

Answer 3

您可以使用例如以下方式选择前三个元素：

ul li:nth-of-type(-n+3) {

}

但像其他人提到的一样，您的标记是无效的，您一定应该进行更正。

- mkas

Answer 4

就像其他人已经提到的那样，直接的答案是 li:nth-child(-n+2) { ... }。

不知道你是否和我一样，在第一次学习这个 -n+2 部分时，我的反应是“什么？这是一个打字错误吗？”。因此，对于那些喜欢了解一些解释而不仅仅是复制粘贴反直觉魔法的人，我在这里包含了一个由 Sara Cope 撰写的 美妙的博客文章链接，该链接解释了 -n+2 部分:

选择前 n 个元素的语法有点反直觉。您从 -n 开始，加上您要选择的正数个元素。例如，li:nth-child(-n+2) 将选择前两个 li 元素。

这种解释甚至在w3cshool的 nth-child 页面中也没有提到。

- RayLuo

---

感谢您解释并提供nth-child公式的链接。 - Mark