html中li整体变色,css如何设置li不同颜色？

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

css使用:nth-of-type(n)选择器设置li隔行变色：

css3隔行变换色

#list1 li:nth-of-type(odd){ background:#00ccff;}奇数行

#list1 li:nth-of-type(even){ background:#ffcc00;}偶数行

• 1111111
• 222222222222CSS3隔行换色测试
• 333333333
• 44444444
• 55555555555555
• 66666666666666666

效果图：

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。

n可以是一个数字，一个关键字，或者一个公式。

奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数(该索引的第一个子节点是1)。