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> 

 1 <div>
 2 <ul id="list1">
 3 <li>1111111</li>
 4 <li>222222222222</li>
 5 <li>333333333</li>
 6 <li>44444444</li>
 7 <li>55555555555555</li>
 8 <li>66666666666666666</li>
 9 </ul>
10 <hr />
11 <ul id="list2">
12 <li>1111111</li>
13 <li>222222222222CSS3</li>
14 <li>333333333</li>
15 <li>44444444</li>
16 <li>55555555555555</li>
17 <li>66666666666666666</li>
18 </ul>
19 </div>