如何选择第一个2< li>元素使用css [英] How to select first 2 <li> elements using css

问题描述

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

 < div class =one> 
< ul> 
< p> 
< li>一个< / li> 
< li>两个< / li> 
< p> 
< li>四< / li> 
< li>五< / li> 
< / ul> 
< / div> 
  

在应用于所有4 li 元素

  .one ul p：nth-​​child（odd）〜li {
 background：lightsteelblue; 
} 
  

解决方案

$ c> li 中的元素尝试：

  .one ul li：nth-​​child（-n + 3）{
 //你的风格
} 
  

查看 jsfiddle

$ b

$ b

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

  .one ul li：nth-​​child（-n + 2）{
 / / your style 
} 
  

查看 jsfiddle

更新：我的建议是使用另一个 ul 而不是 p ：所以你有有效的标记和相同的结果：

HTML

< ul>
< li> 0< / li>
< li>
< ul>
< li>一个< / li>
< li>两个< / li>
< li> 3< / li>
< / ul>
< li>
< li>四< / li>
< li>五< / li>
< / ul>
< / div>

CSS：

  .one ul {
 padding：0; 
 list-style-type：none; 
} 
 .one ul ul li：nth-​​child（-n + 2）{
 //你的风格
} 
  

更新jsfiddle

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

  ul li.bold {
 //您的风格
} 
  pre> 
Hi i want to apply css for first 2 elements (one,two) that are adjacent to first <p> element. 
<div class="one">
    <ul>
        <p>
            <li>One</li>
            <li>Two</li>
        <p>
        <li>Four</li>
        <li>Five</li>
    </ul>
</div>
Following getting applied to all 4 li elements
.one ul p:nth-child(odd) ~ li {
    background: lightsteelblue;
}

解决方案
For first 2 li elements inside ul p try:
.one ul li:nth-child(-n+3){
    // your style
}
See on jsfiddle

And as other mates mentioned: you have invalid markup.

If you removed p element, try:
.one ul li:nth-child(-n+2){
    // your style
}
See on jsfiddle

Update: My suggestion is to use another ul instead of p: So you have valid markup and same result:

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

Note: As your last comment, If you have only 2 special li element, Why not define a class name simply... <li class="bold">  Do it simple
ul li.bold {
    // your style
}


                        
这篇关于如何选择第一个2&lt; li&gt;元素使用css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！