第n个子CSS选择器

我有九套配色方案，我想应用于一系列div。使用

：nth child（1），：nth child（2）.

在前九个阶段有效，但我希望在这之后重复这个序列，我不能用（3n+2）符号来表示。。。我想我明白了，但我似乎无法说服它做我想做的事

---

这是可能的，还是我应该在写每个div时对它们应用一个类？

如果您的意思是需要对每九个连续元素应用不同的规则，则必须使用以下九个选择器：

:nth-child(9n+1)
:nth-child(9n+2)
:nth-child(9n+3)
:nth-child(9n+4)
:nth-child(9n+5)
:nth-child(9n+6)
:nth-child(9n+7)
:nth-child(9n+8)
:nth-child(9n+9) /* Or :nth-child(9n) */

首先是一些花絮：

• 第n个子项使用基于

  1

  的索引进行匹配（即

  n个子项（1）

  是第一个子项，而不是第二个子项）

• n

  在

  a+B

  符号中是迭代器值

• n

  从

  0

  开始计数

• An+B

  将是一个匹配的索引（我称之为

  I

  ）

如果您有一组要匹配的元素，您应该将它们写出来：

例如：

1st, 10th, 19th, 28th...

在这种情况下，您希望将

n

与特定索引匹配

n | i
======
0 |  1
1 | 10
2 | 19
3 | 28
4 | 37
etc...

如果我们使用

n=0

求解

An+B=i

，

i=1

我们可以得到B的值：

A(0) + B = 1
B = 1

然后，我们可以使用

n=1

，

i=10

，在第二次替换中使用该值：

A(1) + 1 = 10;
A = 9;

因此，我们现在有了

9n+1

供选择器匹配

1,10,19,28等

您可以对每个不同的选择进行清洗和重复，但很快您就会意识到重复发生在每个

A

元素上，偏移量是

B

元素

---

nth child

选择器是高中代数实际有用的一个很好的现实例子

这不应该从：nth child（9n+1）开始吗？因为CSS选择器从索引1开始？@Joe Landsman你是对的，这样做会导致

：nth child（9n）

直到第10个元素才被应用，而不是第一个。如果你想要向后兼容，你应该使用类，因为Internet Exploder不支持第n个子项。你可以在上找到稍微过时的CSS3兼容矩阵。如果您查找'nth child'选择器，您会注意到IE领域中的支持是粗略的。如果你真的想/需要使用这些选择器，并且不介意在你的应用程序中使用javascript，那么你可以使用jQuery在IET中实现这些选择器。这是一个有趣的/爱好项目，所以我不太关心浏览器向后兼容性，而是更多地利用这个机会了解一些新的CSS3功能是如何工作的。非常彻底，谢谢如果我在发布此问题之前阅读的示例只是说，

重复每A元素一次，偏移量是B元素，我会马上理解它。