我有以下标记:
<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
?