nth-Child CSS选择器

Question

我有九套颜色方案,我想应用于一系列div.使用:nth-child(1), :nth-child(2)...前九个的作品,但是我希望之后的序列重复,我不能用(3n + 2)符号包围我...我想我明白了,但我不能似乎哄它做我想做的事.

这是可能的,还是我应该在我写出来时为每个div应用一个类？

Answer 1

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

: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) */

Answer 2

首先是一些花絮:

• nth-child使用1基于索引进行匹配(即nth-child(1)第一个孩子,而不是第二个孩子)
• n在An + B表示法中是迭代器值
• n开始0并计数
• An + B将是一个匹配的索引(我会称之为i)

阅读规范了解更多信息

如果你想要匹配一组元素,你应该写出来:

例:

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

在这种情况下,您希望匹配n特定的索引

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

如果我们解决An + B = i使用问题n = 0,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,etc

您可以为每个不同的选择进行冲洗和重复,但很快您就应该意识到重复发生在每个A元素上,并且偏移是B元素.

_{该nth-child选择是在那里的高中代数是一个伟大的现实世界的例子真正有用}