有一种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系列。
还有不理解的？
为了让你更好的理解，这里有一个测试页，在那里，你可以直接输入方程式，并立刻看到的结果是什么。