css3属性nth-child的用法大全

1.设置单双行

ul li:nth-child(odd){background-color:green;}/*设置单行样式*/
ul li:nth-child(even){background-color:gray}/*设置双行样式*/

2.设置每隔3个应用样式

ul li:nth-child(3n){background-color:green;}/* 3,6,9,12... */

3.指定元素

ul li:nth-child(4){background-color:green;}/*单独设置第四个li*/

4.自定义起始元素

ul li:nth-child(3n+2){background-color:green;}/*匹配2,5,8,11...*/

5.(n+number)形式

ul li:nth-child(n+6){background-color:green;}/*从第六个li开始匹配*/
ul li:nth-child(-n+6){background-color:green;}/*匹配1-6的元素*/

6.自定义区间

ul li:nth-child(n+3):nth-child(-n+5){background-color:green;}/*匹配3-5的元素*/

7.nth:child(3n-1)

ul li:nth-child(3n-1){background-color:green;}/*匹配(3-1),(6-1),(9-1)....*/

上面的七种基本是nth:chlid的全部用法，可以混合使用来实现更复杂的筛选。

内容转载自：关于css3属性nth-child的用法大全_航海博客