我有以下标记：
<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？
您不能仅凭CSS选择器来做到这一点。:nth-child()和兄弟组合器只限于其名称暗示的子/兄弟共享同一个父级，而CSS选择器无法解释父子结构的这种变化，也没有类似:nth-grandchild()选择器的东西（即使:nth-match()选择器4也将其自身限制为元素仅共享同一父对象）。
当然，对于类似jQuery的东西，它变得微不足道：$('.foo li:eq(0), .foo li:eq(2)')否则，您必须li使用类或ID显式标记第一个和第三个元素，然后选择它们。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句