连续的n-child（多次出现）

Question

我有一个由数千个项目组成的列表。

为了以干净的方式显示它们，我需要将特定的css规则应用于列表中的每个第三项（第3个li，第6个li，第9个li，....，3000th li..9999th li。 ..）。

通常，我会用这个：

li:nth-child(3),li:nth-child(6),...

但是为每个项目写一个css规则显然太繁琐了（更不用说列表可能随着时间的推移而增长）

我也可以为列表中的每个第三项使用一个类，但是根据jQuery插件（Quicksand）的过滤器不断重新排序列表，因此第6个li可以根据用户操作异步成为第4个。

那么，有没有办法使用css规则来做这样的事情？：

li:nth-child(n*3)

谢谢。

Answer 1

您可以将:nth-child(an+b)伪类用作li:nth-child(3n+3)，以便从第3 <开始选择每隔三个列表项（a参数） / strong> <li>元素（b参数）。

其中：

n starts from 0

n = 0: (3 * 0 + 3) = 3 => 3rd element
n = 1: (3 * 1 + 3) = 6 => 6th element
n = 2: (3 * 2 + 3) = 9 => 9th element
...

li:nth-child(3n+3) {
    background-color: gold;
}

<强> Example Here 即可。 （与li:nth-child(3n)相同）。

来自 MDN ：

  

:nth-child(an+b) CSS伪类匹配具有的元素   对于给定的积极因素，在文档树中它前面有一个+ b-1个兄弟姐妹   或n为零值，并具有父元素。

值得注意的是:nth-child伪班is supported in IE9+。