Question

您好我想为前两个与第一个<p>元素相邻的元素（一个，两个）应用css。

<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;
}

Answer 1

对于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
}

Updated jsfiddle

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

ul li.bold { // your style }

Answer 2

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

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

Answer 3

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

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

}

但与其他提到的一样，你的标记无效，你一定要纠正它。

Answer 4

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

我不了解您，但是当我第一次学习此-n+2部分时，我的反应是“这是什么错字？”。因此，对于那些想要了解一些解释而不仅仅是复制并粘贴违反直觉的魔术的人，在这里，我提供了指向wonderful blog post by Sara Cope的链接，用于解释-n+2部分：

选择前n个元素的语法有点违反直觉。您以-n开头，加上要选择的正数元素。例如，li：nth-child（-n + 2）将选择前2个li元素。

w3cshool for nth-child中甚至缺少这种解释。

如何使用css </li>选择前2个<li>元素

4 个答案: