"/>

css如何设置li不同颜色?

在我们设置HTML网页时经常会用到li来设置网页效果,但是使用li设置的效果比较单调,我们可以使用css为li设置不同的颜色来优化网页效果。

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

推荐阅读