css3之:nth-child伪类选择器

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/