css - 连续第 n 个 child (多次出现)

Question

我有一个包含数千项的列表。

为了以干净的方式显示它们，我需要对列表的每三个元素应用一个特定的 css 规则(第 3 里、第 6 里、第 9 里、....、第 3000 里..第 9999 里。 ..).

通常，我会使用这个:

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)为了选择从第三 a 开始的每隔三个 列表项(<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 :

The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element.

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