做爱疯和安卓的项目，觉得JqueryMobile太过于臃肿，于是废弃，不过JqueryMobile的UI还是比较耐看的，于是提取了不少样式来用。
其中用的最多的就是ul、li列表，不过JQM的样式写的太过于臃肿，而且还要嵌套一堆div，于是又弃用了JQM的样式…….

废话不多说，正式开始~~

隔行效果一直是比较难受的东西，不是说有多复杂，而是总是配合着JS或者后台代码太过于恶心…
CSS3 中提供了强大的伪类（pseudo-class）选择器，使开发者能选择某一对象中符合特定条件的元素进行渲染。

今天我们来说说nth-child
nth-child伪类在W3C里定义是选择选择父元素里的第n个子元素，可以使用an+b的形式选择子元素，举例用法如下：

ul.demo1 li:nth-child(3){
	color: green;
	background-color:black;
}

效果

• 测试1
• 测试2
• 测试3
• 测试4

在nth-child的括号中，可以填写：
odd代表单数,even代表双数行
也可以在里面书写包含字母n的方程式
比如
tr:nth-child(2n+1) 效果同 tr:nth-child(odd) 表示单数行
tr:nth-child(2n) 效果同 tr:nth-child(even) 表示双数行
有一点要注意(-n)比较特殊，无论n为多少(-n+x)的值必须为正数才有效，例如
tr:nth-child(-n+3)，那么实际效果就是前3行被选中。
由此，咱么可以实现点特殊的效果

ul.demo2 li:nth-child(odd){
	color: #aaa;
	background-color:#444;
}
ul.demo2 li:nth-child(even){
	color: #222;
	background-color:#ccc;
}
ul.demo2 li:nth-child(-n+3){
	color: #fff;
	background-color:#000;
}

• 测试1
• 测试2
• 测试3
• 测试4
• 测试5
• 测试6
• 测试7
• 测试8

nth-child伪类的衍生
除了nth-child以外，W3C还为我们提供了几个基于nth-child定义的衍生伪类，这里简单地说说他们的用途。

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

好了，相信大家都是很聪明的，我就不多说了，最后提醒一下，大家不要被文章的例子限制死了，要灵活运用。我送给大家一个Table~

01	02	03	04	05
11	12	13	14	15
21	22	23	24	25
31	32	33	34	35
41	42	43	44	45
51	52	53	54	55