如何使用css选择第一个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;
}

解决方法

对于第一个2 li元素在ul p try:
.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

注意:作为最后一个注释,如果你只有两个特殊的li元素,为什么不能简单地定义一个类名…< li class =“bold”>简单

ul li.bold {
    // your style
}

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效