CSS3之伪类选择器：nth-child()

CSS3提供了强大的伪类（pseudo-class）选择器，使开发者能选择某一对象中符合特定条件的元素进行渲染。这些伪类在刚接触的时候大家会觉得非常混乱，但当掌握了以后能大大提高你的代码效率，并且节省代码量。今天先要说的是nth-child伪类。

下面给大家介绍下nth-child的用法:
first-child 定义第一个li样式

 
 
.test1 li:nth-child(1){background: red} 

first-child 定义第一个li样式
nth-last-child(n): 选择某个子元素，从最后一个数起
nth-of-type(n): 选择某个某种类型的子元素
nth-last-of-type(n): 选择某个某种类型的子元素，从最后一个符合条件的元素数起
first-child: 选择第一个子元素（这个伪类在CSS2里就有）
last-child: 选择最后一个子元素

 
 
.test2 li:first-child{background: red} 

nth-child(2n) 定义偶数li的样式
nth-child(2n+1) 选择奇数行
nth-child(odd) 同上
nth-child(2n) 选择偶数行
nth-child(even) 同上

 
 
.test3 li:nth-child(2n){background: red} 

nth-child(n+2)选取大于等于2的li

 
 
.test4 li:nth-child(n+2){background: red} 

nth-child(-n+3)选取小于等于3的li

 
 
.test5 li:nth-child(-n+3){background: red}