跨多个父元素选择第n个子元素

Question

我有以下标记：

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

我希望样式化 "one" 和 "three"。

然而，标记也可能是：

<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的第1个和第3个li？

- Curtis

Answer 1

仅通过CSS选择器无法实现该操作。由于:nth-child()和兄弟组合器只能限制在具有相同父元素的子元素/兄弟元素之间，因此CSS选择器不能考虑到父子结构中的这种变化，也没有类似于:nth-grandchild()选择器的东西（即使是从Selectors 4中的:nth-match()也仅限于共享相同父级的元素）。

当然，在使用类似于jQuery这样的框架时，这变得非常简单：$('.foo li:eq(0), .foo li:eq(2)') 否则，您必须明确标记第一个和第三个li元素，然后进行选择。

- BoltClock

Answer 2

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

li:nth-child(odd) {
  color: red;
}
li:nth-child(even) {
  color: white;
}

- Charles

---

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

第1个和第3个子元素是奇数，使用li:nth-child(odd)可以针对这两个元素进行定位。算了，我现在看到了。抱歉。 - Charles

除非问题涉及选择具有不同父母的孩子，否则请仅返回翻译文本。 - vanowm