css3隔行变换色实现示例

<style>
#list1 li:nth-of-type(odd){ background:#00ccff;}/*奇数行*/ 
#list1 li:nth-of-type(even){ background:#ffcc00;}/*偶数行 */ 
#list2 li:nth-child(4n+1){ background:#00ccff;}/*从第一行开始算起 每隔4个（包含第四个）使用此样式 */ 
#list00000 li:nth-child(4n+2){background:#090;}/*从第二行开始算起 每隔4个（包含第四个）使用次样式 */ 
#list00000 li:nth-child(4n+3){background:#009;}/*从第三行开始算起 每隔4个（包含第四个）使用次样式 */ 
#list00000 li:nth-child(4n+4){background:#990;}/*从第四行开始算起 每隔4个（包含第四个）使用次样式 */
</style>
 

<div> 
<ul id="list1"> 
<li>1111111</li> 
<li>222222222222</li> 
<li>333333333</li> 
<li>44444444</li> 
<li>55555555555555</li> 
<li>66666666666666666</li> 
</ul> 
<hr /> 
<ul id="list2"> 
<li>1111111</li> 
<li>222222222222CSS3</li> 
<li>333333333</li> 
<li>44444444</li> 
<li>55555555555555</li> 
<li>66666666666666666</li> 
</ul> 
</div>