css 每n个元素,选择CSS中的每N个元素

小编典典

顾名思义，它允许您使用除常数以外的变量构造算术表达式。您可以执行加法()，减法()和系数乘法(其中是整数，包括正数，负数和零)。:**n** th-child()``n``+``-``an``a

这是重写上面的选择器列表的方法：

div:nth-child(4n)

有关这些算术表达式如何工作的解释，请参见我对该问题的回答以及规范。

请注意，此答案假设同一父元素内的所有子元素都具有相同的元素类型div。如果您还有其他不同类型的元素，例如h1或p，则需要使用:nth-of-type()代替，:nth-child()以确保仅对div元素进行计数：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

对于其他所有内容(类，属性或它们的任意组合)，如果要查找与任意选择器匹配的第n个子代，则无法使用纯CSS选择器来完成此操作。

顺便说一下，关于，4n和4n + 4之间没有太大区别:nth-child()。如果使用该n变量，它将从0开始计数。这是每个选择器都将匹配的内容：

:nth-child(4n)

4(0) = 0

4(1) = 4

4(2) = 8

4(3) = 12

4(4) = 16

...

:nth-child(4n+4)

4(0) + 4 = 0 + 4 = 4

4(1) + 4 = 4 + 4 = 8

4(2) + 4 = 8 + 4 = 12

4(3) + 4 = 12 + 4 = 16

4(4) + 4 = 16 + 4 = 20

...

如您所见，两个选择器将与上述相同的元素匹配，没有区别。

2020-05-16