css - 选择父元素中 3 的倍数的元素

Question

有没有办法用 css 选择父元素中索引倍数为 6 的元素？

例如，在这种情况下，我只想选择 3 的倍数:

<div>
    <p></p>
    <p></p>
    <p></p> <!--to select -->
    <p></p>
    <p></p>
    <p></p> <!--to select -->
    <p></p>
    <p></p>
    <p></p> <!--to select -->
</div>

Answer 1

使用:nth-child(n) :

p:nth-child(3n) {
  background: red
}

演示:http://jsbin.com/azehum/4/edit

此方法适用于 IE9+(来源:caniuse.com)。如果您需要旧版浏览器的支持，您可以使用 jQuery选择元素并向它们添加类:

$("p:nth-child(3n)").addClass("redbg");