css - 使用 CSS 获取相对于其父元素的第 n 个元素

Question

我想相对于它的父元素设置第 n 个元素的样式，而不是相对于文档。明白啦：

CSS：

ul li:nth-child(2n){ background: #fff; }

html:

<ul>
<li></li> // background is white
<li></li>
<li></li> // background is white
</ul>
<ul>
<li></li>
<li></li> // background is white
<li></li>
</ul>

在这种情况下，每个第二个元素获取一个白色背景，从文档开始计数，元素获取父元素“ul”无关紧要。

现在我希望在每个“ul”元素处重新设置计数。结果应如下所示：

<ul>
<li></li> // background is white
<li></li>
<li></li> // background is white
</ul>
<ul>
<li></li> // background is white
<li></li>
<li></li> // background is white
</ul>

谁能帮我吗？

Answer 1

ul > li:nth-child(2n) {background: #fff;}

不过，这不应该是必要的。您的原始代码工作正常：http: //jsfiddle.net/isherwood/5MKtK

Answer 2

使用此 第 n 个类型 和直接后代选择器

ul >li:nth-of-type(2n){ background: #fff; }

工具：http ://css-tricks.com/examples/nth-child-tester/