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选择器无法解释父子结构中的这种变化，也没有像{{1}这样的变化。 } selector（even :nth-match() from Selectors 4将自己限制为仅共享同一父级的元素。）

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

Answer 2

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

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

选择多个父母的第n个孩子

2 个答案: