[翻译]nth-child的工作机制

最新推荐文章于 2025-12-26 14:47:21 发布

原创最新推荐文章于 2025-12-26 14:47:21 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#工作 #浏览器 #css #scroll #jquery #border

本文深入解析CSS中的nth-child选择器，解释其工作原理并提供实例演示。通过不同参数设置，实现对特定子元素的选择与样式调整。同时讨论其浏览器兼容性问题与替代方案，为开发者提供实用的前端开发技巧。

有一种CSS选择器叫做nth-child，是一种伪类选择器，下面是一个使用它的例子：

1
2
3

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

上面这段CSS做了什么？它选择了一个无序列表(UL)中能被3整除的子元素(LI)，第3、第6、第9、第12……都在其作用范围。那么它是如何工作的呢？我们又能用它来做些什么？不妨一起来看一下。

归结起来，括号中的参数使用有2种方式，首先它可以接受关键字，这里只限”even”和”odd”两种关键词可以使用，显而易见，”even”代表偶数项目，而”odd”代表奇数项目。

就像上面那个例子中所见到的，nth-child的参数也可以是一个方程式。最简单的程式是什么？它可以只有一个数字。如果你将一个数字放在括号中，那么它将选择出与其对应的项目。如下面的例子，只选择出了第5个子元素。

1
2
3

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

让我们回到最上面的例子，看看3n+3是如何工作的。这里的关键在于”n”和数学方程式。想象n从0开始，对应所有正整数，0、1、2、3、……然后完成这个方程式。所以3n=3×n，而3n+3=(3×n)+3。然后将递进的正整数代入，我们得到：

(3 x 0) + 3 = 3 = 第三个子元素
(3 x 1) + 3 = 6 = 第六个子元素
(3 x 2) + 3 = 9 = 第九个子元素
以此类推。

那么:nth-child(2n+1)是什么样的呢？

(2 x 0) + 1 = 1 = 第一个子元素
(2 x 1) + 1 = 3 = 第三个子元素
(2 x 2) + 1 = 5 = 第五个子元素
以此类推。

嗨！等一下，这和”odd”所表示的一模一样，因此或许我们不会很频繁地用到这个方程式。但是等等，这是不是又说明我们原先的那个方程式(3n+3)太复杂了呢？为什么不用(3n+0)或者更简单的(3n)？

(3 x 0) = 0 = 无匹配
(3 x 1) = 3 = 第三个子元素
(3 x 2) = 6 = 第六个子元素
(3 x 3) = 9 = 第九个子元素
以此类推。

所以正如你看到的，(3n+3)、(3n+0)和(3n)实际上没有任何差别，所以完全没有必要+3。我们也可以使用负的n值，以及减法公式。例如(4n-1)：

(4 x 0) – 1 = -1 = 无匹配
(4 x 1) – 1 = 3 = 第三个子元素
(4 x 2) – 1 = 7 = 第七个子元素
以此类推。

如果使用负数的n值，看起来会有些怪异，因为如果结果是负数，则不能匹配到任何元素。所以你需要再使用一个加法等式来使结果重新回到正数。
事实证明，这是一个相当聪明的技术，你可以用它来选择前n个子元素。比如(-n+3)：

-0 + 3 = 3 = 第三个子元素
-1 + 3 = 2 = 第二个子元素
-2 + 3 = 1 = 第一个子元素
-3 + 3 = 0 = 无匹配
etc.

Sitepoint有一个很好的参考指南，其中包括了下面这个 handy-dandy table，我很不厚道地黏贴了过来。

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	-

浏览器兼容性

nth-child是众多非常不幸的CSS属性之一，它们被浏览器兼容风暴所洗礼，而被很多厂家刨除在外，不被接受。整个IE系列对这个属性是零支持，包括IE8。所以它被使用时，往往是以一种“渐进增强”的形式（例如，提供一个很酷的颜色调板表）。而当你想要创建某些更重要的内容时，类似于某些依托于网站结构的内容，你却不应该使用这个属性。
比如你想给一个三行三列的表格中最右侧的一列删除右间距，你应该让这种效果兼容各种浏览器。

这里还有一个可取的方法是使用jQuery，它支持所有的CSS选择器，也包括这个nth-child。而它会被几乎所有浏览器所支持，也包括IE系列。