Css 选择跨多个父级的第n个子级

我有以下标记：

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

但是，正如预期的那样，这是为每个

ul

的第一个子项设置样式。（演示：）

---

如何更改我的CSS，以便我可以针对属于

.foo

的第一个和第三个

li

？

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

：nth-child（）

和兄弟组合词仅限于共享同一父对象的子对象/兄弟对象，正如它们的名称所暗示的那样，CSS选择器不能解释父子结构中的这种变化，也没有类似于

：nth-granter（）的选择器（甚至仅限于共享同一父元素的元素）

当然，像jQuery这样的东西会变得很简单：
$（'.foo-li:eq（0），.foo-li:eq（2）
，否则您必须使用类或ID显式标记第一个和第三个
li
元素，然后选择它们。
您可以使用偶数和奇数选择器

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

我不知道这和问题有什么关系。第一个和第三个孩子很奇怪，使用li:n个孩子（奇数）可以让你只针对这两个孩子。没关系，我现在明白了。对不起。
.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color:red;
}

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