:nth-child 允许我们指定选择第几个子元素 … 比如我们要选择页面上 ul 元素里的第一个 li 元素 ..

$( 'ul li:nth-child(1)' ).addClass( 'shadow' )

注意这个 :nth-child 是从 1 开始的 … 也就是第一个子元素的索引号是1，这跟我们前面介绍的 eq() 不太一样 … eq() 是从 0 开始的 ..

找到 ul 里面的第一个 li 子元素 … 再给它添加一个 shadow 类 …

在 :nth-child 里可以指定子元素所在位置的关键词 … 比如可以使用 odd 或者 even … 选择奇数位置的子元素 … 或者偶数位置的子元素 …

（#刷新）

$( 'ul li:nth-child(odd)' ).addClass( 'shadow' )

:nth-child 从1开始计算 … 所以，1，3，5，7， 这几个子元素被选择了 …

（#刷新）

最试一下 even …

$( 'ul li:nth-child(even)' ).addClass( 'shadow' )

这次选择的是ul元素里的 2，4，6，8，这几个位置上的 li 类型的子元素 …

:nth-child 还支持选择自己定义的成倍数位置上的子元素 …

比如我们要选择第 4 ，还有第 8 个 li 元素 …

$( 'ul li:nth-child(4n)' ).addClass( 'shadow' )

选择的子元素就是，从1数到 4 ，第4个子元素 … 然后在从第4个子元素往后再数4个数 …

如果你想反过来做的话，可以把 :nth-child … 换成 :nth-last-child …

$( 'ul li:nth-last-child(4n)' ).addClass( 'shadow' )

这样就会倒着往回数 …