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

Posted 2023-02-19

【中文标题】在多个父母中选择第 n 个孩子

【英文标题】：Select nth-child across multiple parents

【发布时间】：2013-07-13 05:12:57

【问题描述】：

我有以下标记：

<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 的第一个孩子的样式。 （演示：http://jsfiddle.net/hTfVu/）

如何更改我的 CSS 以便可以定位属于 .foo 的第一个和第三个 li？

【参考方案1】：

你不能单独使用 CSS 选择器来做到这一点。 :nth-child() 和兄弟组合器仅限于共享相同父级的子级/兄弟级，正如他们的名字所暗示的那样，CSS 选择器不能解释父子结构中的这种变化，也没有像 :nth-grandchild() 选择器这样的东西（甚至:nth-match() from Selectors 4 仅限于共享同一父级的元素。

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

【参考方案2】：

您可以使用偶数和奇数选择器。

li:nth-child(odd) 
  color: red;

li:nth-child(even) 
  color: white;

【讨论】：

不确定这与问题有什么关系。

第一个和第三个孩子是奇数，使用 li:nth-child(odd) 可以让您只针对这两个孩子。没关系，我现在看到了。对不起。

除了问题是关于选择不同父母的孩子。