Question

我有

  <ul class="biglist">

在页面的许多地方......我只想选择第二个

 <ul class="biglist">

并再次选择第二个li并为其添加颜色......

我目前拥有如下

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

我尝试添加...

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

它不会选择第二个列表的第二个项目。试图在互联网搜索，无法得到合适的解决方案。有人可以帮忙吗？

这是我的完整代码......

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

Answer 1

您可以尝试使用:nth-of-type(N)：

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

Answer 2

我的理解是这在使用nth-child或nth-of-type的CSS中是不可能的。

类检查在第n个元素检查之后完成，因此如果类biglist之间有其他ul元素，则无法保证选择要查找的ul。

您需要基于JavaScript的解决方案。

例如，使用Jquery：

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

Answer 3

nth-of-type检查其直接父级中项目的出现次数。对于HTML，在div中只有一个ul。因此，您要做的是首先选择一个顶级元素（column_container），然后将其ul的第二个li设置为红色。在这里，您可以使用HTML查看正在运行的codepen示例。

https://codepen.io/tskjetne/pen/gWLKKr

为了澄清，我所做的是将第二个column_container的{{1}}的第二个ul设置为红色。

Answer 4

鉴于现在知道你在UL之间有元素，css只能起作用。这是一个jQuery解决方案：

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

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

4 个答案: