css实现隔行变色：
<html>
<head>
<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>
</head>
<body>
<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>
</body>
</html>效果如下：
css的:nth-of-type()选择器可以使用奇数和偶数作为关键字来匹配奇数和偶数行，使奇数和偶数行样式不同实现隔行变色。
:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
n可以是一个数字，一个关键字，或者一个公式。奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数
推荐：css手册
以上就是css如何实现隔行变色？的详细内容，更多请关注易知道|edz.cc其它相关文章！
