css3之:nth-child伪种选择器
日期：2014-05-17 浏览次数：20700 次
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;}
?
?
浏览器支持：
- ?? 对应IE来讲：IE7支持:last-child，其他的IE9支持
- ???Opera9+和Safari3+等现代浏览器支持的比较好
扩展阅读：
1、http://css-tricks.com/useful-nth-child-recipies/
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
