CSS nth-child 详解

举个例子：

css

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

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

总的来说 nth-child() 圆括号里面支持两个关键词：even 与 odd。他们应该很明显的，even 选择偶数标签，如第 2、第 4、第 6 等等。odd 选择奇数标签，如第 1，第 3，第 5。

正如你在第一个例子里面看到的，nth-child() 的圆括号里也支持方程式的，是最简单的方程式吗？仅仅是数字。如果你在圆括号里面输入一个数字，那它仅仅选择这个数目对应的那个标签。比如，如何仅仅选择第 5 个标签元素。

css

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

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

让我们回到刚开始例子里面的 3n+3 上面吧，他的工作原理是怎样的？为什么他仅仅选择 3 倍数的标签元素？这里就要理解 n 与数学方程式的计算。

n 则表示大于等于 0 的整数。由此可见 3n 就是 3 x n，这个方程式就可以解释为 (3xn)+3,也就是 n 为 0 或大于 0 的整数。于是我们可以得到

bash

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

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

:nth-child(2n+1) 又是怎么计算的那？

bash

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

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

稍等！这跟 odd 是一样的！所以 1 就没有必要多次出现了。现在，再看我们原来的例子就感觉代码复杂了些。我们可以用 3n+0 甚至 3n 代替 3n+3.

bash

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

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

正如你所看到的，我们不用+3 就可以做到同样的效果。我们也可以使用负数。在方程式里面使用减法，如 4n-1；

bash

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

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

使用 -n 值看起来有点古怪。如果方程式计算得到的值是负数，他就不指定任何元素标签。正如结果展示的那样，这是一个相当聪明的技术，你可以使用 -n+3 选择选择前几个元素标签。

bash

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

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

CSS nth-child 详解 ​