CSS3提供了强大的伪类（pseudo-class）选择器，使开发者能选择某一对象中符合特定条件的元素进行渲染。这些伪类在刚接触的时候大家 会觉得非常混乱，但当掌握了以后能大大提高你的代码效率，并且节省代码量。今天先要说的是nth-child伪类 。
nth-child伪类的定义
nth-child伪类在W3C里定义是选择选择父元素里的第n个子元素，可以使用an+b 的形式选择子元素， 举例用法如下：
tr:nth-child(2n+1) /* 选择表格里的单数行 */
tr:nth-child(odd) /* 同上 */
tr:nth-child(2n) /* 选择表格里的双数行 */
tr:nth-child(even) /* 同上 */
tr:nth-child(odd) /* 同上 */
tr:nth-child(2n) /* 选择表格里的双数行 */
tr:nth-child(even) /* 同上 */
聪明的看官大概已经知道nth-child伪类可以用来干什么了。
CSS3 nth-child 伪类应用实例 — 隔行变色列表
既然nth-child伪类能让我们轻松第选择容器里的某一个子元素，我们是不是可以用它来干点什么呢？需求最大的当然是隔行变色的表格或者列表。 我们这就去做一个隔行变色的列表看看。
首先确定列表的HTML结构，我使用了做简单的ul > li 结构，代码如下
<ul>
<li> 项目一 </li>
<li> 项目二 </li>
<li> 项目三 </li>
<li> 项目四 </li>
<li> 项目五 </li>
<li> 项目六 </li>
<li> 项目七 </li>
</ul>
<li> 项目一 </li>
<li> 项目二 </li>
<li> 项目三 </li>
<li> 项目四 </li>
<li> 项目五 </li>
<li> 项目六 </li>
<li> 项目七 </li>
</ul>
列表的结构确定后，我们要做的是使ul里的七个li项根据单双项的规则进行隔行变色的处理。因此我们用nth-child(2n+1) 或 者nth-child(2n) 进行选择都可以。我的CSS代码如下：
ul li {
background: #9FF none repeat scroll 0 0;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding: 10px;
color: #000;
}
ul li:nth-child(2n+1) {
background: #6F9 none repeat scroll 0 0;
}
background: #9FF none repeat scroll 0 0;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding: 10px;
color: #000;
}
ul li:nth-child(2n+1) {
background: #6F9 none repeat scroll 0 0;
}
在这里我选择了对列表的单数项进行特殊渲染，下面是我做出来的效果，大家也可以看这个DEMO 。
