选择多个父母的第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以便我可以定位第1和第3 li属于.foo？

Answer 1

你不能单独使用CSS选择器.:nth-child()和兄弟组合子仅限于孩子/兄弟只共享相同的父,正如他们的名字暗示,和CSS选择器不能解释在母子结构的这种变化,也不是有什么样的:nth-grandchild()选择(甚至:nth-match()从选择器4点的限制本身元素只共享同一个父母).

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