css3中有很多新增的功能,让我们以前不得不用js才能完成功能,现在用css就可以完成。
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的全部用法,可以混合使用来实现更复杂的筛选