深度了解CSS3中:nth-child选择器用法

前端实际应用中更容易用到的CSS3选择器是:first-child和:last-child，它们的作用分别是选取第一个和最末一个子元素。而实际上它们还有一个功能上更强大的兄弟选择器，:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n可以是数字、关键词或公式。除了 IE8 及更早的版本，所有主流浏览器均支持 :nth-child() 选择器。

以下例出所有可能的选择形式样式代码来给大家讲解:nth-child的实际用途：

:nth-child(2)选取第几个标签，“2可以是你想要的数字”

.demo01 li:nth-child(2){background:#090}

:nth-child(n+4)选取大于等于4标签，“n”表示从整数，下同

.demo01 li:nth-child(n+4){background:#090}

:nth-child(-n+4)选取小于等于4标签

.demo01 li:nth-child(-n+4){background:#090}

:nth-child(2n)选取偶数标签，2n也可以是even

.demo01 li:nth-child(2n){background:#090}

:nth-child(2n-1)选取奇数标签，2n-1可以是odd

.demo01 li:nth-child(2n-1){background:#090}

:nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一”

.demo01 li:nth-child(3n+1){background:#090}

:last-child选取最后一个标签

.demo01 li:last-child{background:#090}

:nth-last-child(3)选取倒数第几个标签,3表示选取第3个

.demo01 li:nth-last-child(3){background:#090}

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

下面我们单独举例为奇数和偶数 p 元素指定两种不同的背景色：

p:nth-child(odd){background:#ff0000;}

p:nth-child(even){background:#0000ff;}

需要注意的是，:nth-child是针对所有同级的子元素，不管同级子元素是a还是p，都将同等按序计数，计数从1开始。