html - 使用不同颜色的样式列表项

Question

我想用三种不同的颜色来设计我的列表项。推荐的做法是什么？

到目前为止我的代码:

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

使用 nth-child 来区分元素。

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