一尘不染

从多个父母中选择第n个孩子

css

我有以下标记:

<div class="foo">
    <ul>
        <li>one</li>
        <li>two</li>
    </ul>
    <ul>
        <li>three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div>

我希望将样式设置为“一个”和“三个”。

但是,标记也可以是:

<div class="foo">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div>

我尝试使用以下CSS:

.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color:red;
}

但是,正如预期的那样,这是每个样式的第一个子元素的样式ul

如何更改CSS,以便可以定位li属于的第1个和第3个.foo


阅读 321

收藏
2020-05-16

共1个答案

一尘不染

您不能仅凭CSS选择器来做到这一点。:nth- child()和兄弟组合器仅限于共享其父代的子代/兄弟姐妹,正如其名称所暗示的那样,并且CSS选择器无法解释父子结构的这种变化,也没有类似:nth-grandchild()选择器的东西(即使:nth-match()从选择器4中将其自身限制为元素仅共享同一父对象)。

当然,对于类似jQuery的东西,它变得微不足道:$('.fooli:eq(0),.fooli:eq(2)')否则,您必须li使用类或ID显式标记第一个和第三个元素,然后选择它们。

2020-05-16