Nth-child 选择器的工作原理

有一个 CSS 选择器，实际上是一个伪选择器，称为 :nth-child。 以下是如何使用它的示例

ul li:nth-child(3n+3) {  
  color: #ccc;
}

上面的 CSS 代码的作用是选择无序列表中每个第三个列表项。 也就是第 3 个、第 6 个、第 9 个、第 12 个等等。 但是它是如何工作的呢？ 以及您还可以使用 :nth-child 做哪些其他事情？ 让我们来看看。

它归结为括号之间的内容。 nth-child 在该位置接受两个关键字：even 和 odd。 这些应该非常明显。“Even” 选择偶数编号的元素，例如第 2 个、第 4 个、第 6 个等等。“Odd” 选择奇数编号的元素，例如第 1 个、第 3 个、第 5 个等等。

如第一个示例所示，nth-child 还接受括号之间的表达式。 最简单的表达式是什么？ 只是一个数字。 如果您只在括号中输入一个数字，它将只匹配该数字元素。 例如，以下是如何仅选择第 5 个元素

ul li:nth-child(5) {  
  color: #ccc;
}

让我们回到原始示例中的 3n+3。 它是如何工作的？ 为什么它选择每个第三个元素？ 诀窍在于理解“n”和它所代表的代数表达式。 将 n 视为从零开始，然后是一组所有正整数。 然后完成表达式。 因此，3n 是“3xn”，整个表达式合起来是“(3xn)+3”。 现在代入零和正整数，我们得到

(3 x 0) + 3 = 3 = 3rd Element
(3 x 1) + 3 = 6 = 6th Element
(3 x 2) + 3 = 9 = 9th Element
etc.

:nth-child(2n+1) 怎么样？

(2 x 0) + 1 = 1 = 1st Element
(2 x 1) + 1 = 3 = 3rd Element
(2 x 2) + 1 = 5 = 5th Element
etc.

等等！ 这与“odd”相同，因此可能不需要经常使用它。 但是等等。 我们是否已经将我们最初的示例暴露为过于复杂了？ 如果我们不使用“3n+3”，而是使用 3n+0，甚至更简单的 3n 呢。

(3 x 0) = 0 = no match
(3 x 1) = 3 = 3rd Element
(3 x 2) = 6 = 6th Element
(3 x 3) = 9 = 9th Element
etc.

因此，如您所见，匹配完全相同，无需“+3”。 我们也可以使用负 n 值，以及在表达式中使用减法。 例如，4n-1

(4 x 0) - 1 = -1 = no match
(4 x 1) - 1 = 3 = 3rd Element
(4 x 2) - 1 = 7 = 7th Element
etc.

使用 -n 值看起来有点奇怪，因为如果最终结果为负数，则没有匹配项，因此您需要添加到表达式中以使其再次变为正数。 事实证明，这是一种相当巧妙的技术。 您可以使用它来选择“前 n 个元素”，方法是使用 -n+3

-0 + 3 = 3 = 3rd Element
-1 + 3 = 2 = 2nd Element
-2 + 3 = 1 = 1st Element
-3 + 3 = 0 = no match
etc.

Sitepoint 有一个不错的参考指南，其中包含此 方便的表格，我将在这里厚颜无耻地重新发布它

n	2n+1	4n+1	4n+4	4n	5n-2	-n+3
0	1	1	4	–	–	3
1	3	5	8	4	3	2
2	5	9	12	8	8	1
3	7	13	16	12	13	–
4	9	17	20	16	18	–
5	11	21	24	20	23	–

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
任意	3.2+	任意	9.5+	9+	任意	任意

仍然不明白？

我不太喜欢“我是视觉学习者”这句话。 当然你是，每个人都是。 在像这样的情况下，视觉辅助工具非常有帮助。 为了提供帮助，我创建了一个小的 :nth-child 测试页面。 在那里，您可以输入表达式并查看它选择的内容的结果。

另请参阅此页面上的 有用的 :nth-child 示例，以获取有关最常见的位置选择需求的快速复制粘贴代码。