CSS3之:nth-child伪类选择器
- :nth-child(number) -----匹配第number个元素,参数number必须大于0的整数
举例:li:nth-child(5){color:green;}
![](http://dl.iteye.com/upload/attachment/0063/2554/72580d25-7537-3540-811b-6bfc765b5097.png)
- :nth-child(an) ------匹配所有倍数为a的元素。其中参数an中的字母n不能缺省。
- :nth-child(an+b) |:nth-child(an-b) ------倍数分组匹配,其中a,b均为正整数或0,
举例:li:nth-child(4n+1){color:green;} 或者是4n-7
![](http://dl.iteye.com/upload/attachment/0063/2550/751694b0-ad37-31d3-945e-df07284bee97.png)
- :nth-child(-an+b) 反向倍数分组匹配 ------从第b个开始往回算,最多也不会超过b个。
举例:li:nth-child(-n+5){color:green;}
- :nth-child(odd) -----匹配序号为奇数,和2n+1一样
举例:li:nth-child(odd){color:green;}
![](http://dl.iteye.com/upload/attachment/0063/2548/019f3f3a-c5b5-32f2-a332-deee9dec1eb2.png)
- :nth-child(even) -----匹配序号为偶数,和2n+0或者2n一样
举例:li:nth-child(even){color:green;}
![](http://dl.iteye.com/upload/attachment/0063/2546/4a1b0dbf-fa9d-357a-be57-28283d40e5dc.png)
- :nth-last-child(n) ----选择某个字元素,从最后一个数起
举例:li:nth-last-child(2){color:green;}
![](http://dl.iteye.com/upload/attachment/0063/2542/b1ea7c8d-953c-34e2-928b-2b0d4ba994b0.png)
- :nth-of-type(n) ----选择某个某种类型的子元素
- :nth-last-of-type(n) ----选择某个某种类型的子元素,从最后一个符合条件的元素数起
- :last-child ------最后一个子元素
举例:li:last-child{color:green;}
![](http://dl.iteye.com/upload/attachment/0063/2544/b7278b47-f397-32b0-a41f-05dc42839972.png)
- :nth-child(n+length)
比如:
:nth-child(n+1){
//n从0开始,第一个就生效
}
浏览器支持:
- 对应IE来讲:IE7支持:last-child,其他的IE9支持
- Opera9+和Safari3+等现代浏览器支持的比较好
扩展阅读: