9

我有以下标记:

<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属于的第一个和第三个.foo

4

2 回答 2

14

你不能单独使用 CSS 选择器来做到这一点。:nth-child()和兄弟组合器仅限于共享同一个父级的子级/兄弟级,正如他们的名字所暗示的那样,CSS选择器不能解释父子结构中的这种变化,也没有像:nth-grandchild()选择器这样的东西(即使:nth-match()从选择器4限制自己元素共享相同的父级)。

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

于 2013-07-15T10:56:01.967 回答
-7

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

li:nth-child(odd) {
  color: red;
}
li:nth-child(even) {
  color: white;
}
于 2013-07-15T10:58:45.290 回答