css - 如何使用 css 选择前 2 个 元素

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

前 2 li里面的元素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
}