69

嗨，我想为与第一个元素相邻的前 2 个元素（一个，两个）应用 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;
}
4

4 回答 4

111

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

.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

注意：作为您的最后一条评论，如果您只有 2 个特殊li元素，为什么不简单地定义一个类名......<li class="bold"> 做简单

ul li.bold {
    // your style
}
于 2013-09-07T11:14:51.307 回答
18

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

li:first-child, li:first-child+li {
    color: blue;
}
于 2014-03-06T00:43:32.327 回答
14

您可以选择的前三个元素，例如

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

}

但就像其他人提到的那样，您的标记是无效的，您绝对应该更正它。

于 2013-09-07T11:15:38.560 回答
9

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

我不了解你，但当我第一次学习这-n+2部分时，我的反应是“什么？这是一个错字吗？”。所以，对于那些想知道一些解释而不是仅仅复制和粘贴反直觉魔法的人，我在这里提供了一个链接，指向Sara Cope 的一篇精彩的博客文章，解释这-n+2部分：

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

在nth-child 的 w3cshool 中甚至没有这样的解释。

于 2018-09-15T20:23:58.080 回答