Css 选择类的第二次出现的第二个li

我有

我想补充一下

 .biglist li:nth-child(2) {
  color:#ff0000;
 }

它不会选择第二个列表的第二项。在internet搜索中尝试，但无法获得合适的解决方案。有人能帮忙吗

这是我的完整代码

  .biglist:nth-child(2) li:nth-child(2)

地点一览表：

纽约

安大略省

伦敦


旧址一览表：

孟买

东京

巴厘岛


新项目清单：

巴黎

开罗

德里

您可以尝试使用：

---

鉴于您现在知道ULs之间有元素，仅css将不起作用。下面是一个jQuery解决方案：

ul.biglist li:nth-of-type(2) { background-color: #ff0000; }

---

我的理解是，在CSS中使用第n个child或第n个类型是不可能的

类检查是在第n个元素检查之后完成的，因此，如果在类biglist的元素之间存在其他ul元素，则不能保证选择要查找的ul

您需要一个基于JavaScript的解决方案

例如，使用Jquery：

if (($uls = $("ul.biglist")).length > 1){
  $uls[1].find("li:nth-child(2)").css({ color: "#ff0000" })
}

uls=$（“ul”）；
var bigListCount=0；
对于（i=0；i

nth类型

检查项目在其直接父项中的出现情况。对于HTML，div中只有一个

ul

。因此，您必须首先选择一个顶级元素（列容器），然后将其

ul

的第二个

li

设置为红色。在这里，您可以看到一个使用HTML的代码笔示例

---

为了澄清，我所做的是将第二个

列容器
ul
的第二个
li
设置为红色。
您可以发布其余的标记吗？您可能希望使用
nth-of-type（）
而不是
nth-child（）
，因为
nth-child（）
是指任何类型/类别/etc的其他元素的数量<代码>第n个子元素（2）

仅当ul是其父元素的第二个子元素时才将其作为目标。这取决于标记中只有类biglist的ul。请看：-我在第一个和第二个大列表之间添加了一个ul，您的CSS不再工作。简言之，我认为没有javascript是不可能的。@jemminger-我试过了，但它不起作用。。。我已经更新了问题中的整个html。不管怎样，谢谢你的帮助。这是在所有“大名单”中选择第二列。但是我想让它只选择第二个“大列表”列表中的第二个li。@user2301765，我已经尝试过欺骗，但是我无法单独使用css获得您想要的，所以Baraka可能是对的。另一个注意事项：在内联元素（

li

）中包含块元素（

p

）并不好。感谢您提供此信息。。这给了我一个想法。。。您知道如何在jquery中编写此选择器吗？@user2301765，与在css中编写选择器的方式相同。@user2301765没问题。如果您发现基本“ul”选择器返回大量ul元素，您可能希望通过使用“.shortcode-trister-content-ul”（或类似）选择器来限制这一点。

<div class="vc_col-sm-4 wpb_column column_container ">
    <div class="wpb_wrapper">
        <div class="dt-fancy-separator title-left accent-border-color" style="width: 100%;">
            <div class="dt-fancy-title bg-on" style="color: #ffffff;">
                <span class="separator-holder separator-left"></span>List of Places:
                <span class="separator-holder separator-right"></span>
            </div>
        </div>
        <div class="gap" style="line-height: 10px; height: 10px;"></div>
        <section class="shortcode-teaser frame-fancy frame-on rotateInDownLeft animate-element">
            <div class="shortcode-teaser-content text-big">
                <ul class="biglist">
                    <li><p>New York</p></li>
                    <li><p>Ontario</p></li>
                    <li><p>London</p></li>
                </ul>
            </div>
        </section>
        <div class="gap" style="line-height: 30px; height: 30px;"></div>
    </div> 
</div> 


<div class="vc_col-sm-4 wpb_column column_container ">
    <div class="wpb_wrapper">
        <div class="dt-fancy-separator title-left accent-border-color" style="width: 100%;">
            <div class="dt-fancy-title bg-on" style="color: #ffffff;">
                <span class="separator-holder separator-left"></span>List of Old Places:
                <span class="separator-holder separator-right"></span>
            </div>
        </div>
        <div class="gap" style="line-height: 10px; height: 10px;"></div>
        <section class="shortcode-teaser frame-fancy frame-on rotateInDownLeft animate-element">
            <div class="shortcode-teaser-content text-big">
                <ul class="biglist">
                    <li><p>Mumbai</p></li>
                    <li><p>Tokyo</p></li>
                    <li><p>Bali</p></li>
                </ul>
            </div>
        </section>
        <div class="gap" style="line-height: 30px; height: 30px;"></div>
    </div> 
</div> 

<div class="vc_col-sm-4 wpb_column column_container ">
    <div class="wpb_wrapper">
        <div class="dt-fancy-separator title-left accent-border-color" style="width: 100%;">
            <div class="dt-fancy-title bg-on" style="color: #ffffff;">
                <span class="separator-holder separator-left"></span>List of New Ones:
                <span class="separator-holder separator-right"></span>
            </div>
        </div>
        <div class="gap" style="line-height: 10px; height: 10px;"></div>
        <section class="shortcode-teaser frame-fancy frame-on rotateInDownLeft animate-element">
            <div class="shortcode-teaser-content text-big">
                <ul class="biglist">
                    <li><p>Paris</p></li>
                    <li><p>Cairo</p></li>
                    <li><p>Delhi</p></li>
                </ul>
            </div>
        </section>
        <div class="gap" style="line-height: 30px; height: 30px;"></div>
    </div> 
</div> 

ul.biglist li:nth-of-type(2) { background-color: #ff0000; }

if (($uls = $("ul.biglist")).length > 1){
  $uls[1].find("li:nth-child(2)").css({ color: "#ff0000" })
}

uls = $("ul");
var bigListCount = 0;
for(i = 0; i < uls.length; i++)
{
  if($(uls[i]).hasClass("biglist")) bigListCount++;
  if(bigListCount == 2){
    $(uls[i]).css("color", "#ff0000");
  }
}