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其它相关文章!