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/