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

Question

我有以下标记：

<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，以便可以定位属于

li

的第 1 个和第 3 个

.foo

？

Answer 1

仅使用 CSS 选择器无法做到这一点。

:nth-child()

和兄弟姐妹组合器仅限于共享同一父级的子级/兄弟级，正如它们的名称所暗示的那样，CSS 选择器无法解释父子结构中的此类变化，也没有像

:nth-grandchild()

选择器这样的东西（甚至选择器 4 中的

:nth-match()

仅限于共享相同父级的元素）。

当然，这在使用 Javascript 时很简单，例如使用像 jQuery 这样的库：

$('.foo li:eq(0), .foo li:eq(2)')

否则，您必须使用类或 ID 显式标记第一个和第三个

li

元素，然后选择它们。

Answer 2

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

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