
css使用:nth-of-type(n)选择器设置li隔行变色:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3隔行变换色</title>
<style type="text/css">
#list1 li:nth-of-type(odd){ background:#00ccff;}奇数行
#list1 li:nth-of-type(even){ background:#ffcc00;}偶数行
</style>
</head>
<body>
<div>
<ul id="list1">
<li>1111111</li>
<li>222222222222CSS3隔行换色测试</li>
<li>333333333</li>
<li>44444444</li>
<li>55555555555555</li>
<li>66666666666666666</li>
</ul>
</div>
</body>效果图:

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
n可以是一个数字,一个关键字,或者一个公式。
奇数和偶数是可以作为关键字使用用于相匹配的子元素,其索引是奇数或偶数(该索引的第一个子节点是1)。
以上就是css如何设置li不同颜色?的详细内容,更多请关注易知道|edz.cc其它相关文章!













