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>

在这种情况下，每个seccond元素得到一个白色背景，从文档开始计数，无论元素是否有父元素“ul”。

现在我希望在每个“ul”元素中计数ist resettet。结果应如下所示：

<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

使用此nth-of-type 和直接后代选择器

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

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

使用CSS获取相对于它的父元素的第n个元素

2 个答案: