样式列表项目具有不同的颜色

Question

我想用三种不同颜色设置列表项的样式。建议的方法是什么？

到目前为止我的代码：

＆＃13;

＆＃13;

li { 
  width: 33.333%;
  float: left;
  padding: 15px;
  list-style: none;
}

.light {
  background-color: #085dce;
}

.medium {
  background-color: #0051bb;
}

.dark {
  background-color: #004bad;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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;}