样式不同颜色的列表项

Question

I'd like to style my list items with three different colors. What is the recommended way of doing that?

My code so far:

 li { width: 33.333%; float: left; padding: 15px; list-style: none; } .light { background-color: #085dce; } .medium { background-color: #0051bb; } .dark { background-color: #004bad; } 

 <ul> <li>light-color</li> <li>medium-color</li> <li>dark-color</li> <li>light-color</li> <li>medium-color</li> <li>dark-color</li> <li>light-color</li> <li>medium-color</li> <li>dark-color</li> <li>light-color</li> </ul> 

Answer 1

Use nth-child to differ items.

li:nth-child(3n+1) {background-color: #085dce;}
li:nth-child(3n+2) {background-color: #0051bb;}
li:nth-child(3n) {background-color:#004bad;}