CSS3之:nth-child伪类选择器
- :nth-child(number) -----匹配第number个元素,参数number必须大于0的整数
举例:li:nth-child(5){color:green;}
- :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
- :nth-child(-an+b) 反向倍数分组匹配 ------从第b个开始往回算,最多也不会超过b个。
举例:li:nth-child(-n+5){color:green;}
- :nth-child(odd) -----匹配序号为奇数,和2n+1一样
举例:li:nth-child(odd){color:green;}
- :nth-child(even) -----匹配序号为偶数,和2n+0或者2n一样
举例:li:nth-child(even){color:green;}
- :nth-last-child(n) ----选择某个字元素,从最后一个数起
举例:li:nth-last-child(2){color:green;}
- :nth-of-type(n) ----选择某个某种类型的子元素
- :nth-last-of-type(n) ----选择某个某种类型的子元素,从最后一个符合条件的元素数起
- :last-child ------最后一个子元素
举例:li:last-child{color:green;}
- :nth-child(n+length)
比如:
:nth-child(n+1){
//n从0开始,第一个就生效
}
浏览器支持:
- 对应IE来讲:IE7支持:last-child,其他的IE9支持
- Opera9+和Safari3+等现代浏览器支持的比较好
扩展阅读:
1、 http://css-tricks.com/useful-nth-child-recipies/