css - 不同颜色的重复元素符号点

Question

我正在为 Wordpress 的客户开发一个网站，我希望将标准的黑色圆点更改为不同的颜色。在他们的标志中，他们有 5 种不同深浅的粉红色圆圈，所以他们希望他们的要点能够复制这一点。 IE。前 5 个要点是 5 种粉红色，然后重复。我怎样才能在整个网站上实现这一点？

谢谢，贝基

Answer 1

如果你想要一个模式nth-child是要走的路，它可以让你选择应该跳过多少和一个起点。

ul>li:nth-child(5n - 4) {
  color: red
}
ul>li:nth-child(5n - 3) {
  color: #ff0
}
ul>li:nth-child(5n - 2) {
  color: pink
}
ul>li:nth-child(5n - 1) {
  color: green
}
ul>li:nth-child(5n) {
  color: purple
}
ul>li>span {
  color: #000
}

<ul>
  <li><span>List Item 1</span>
  </li>
  <li><span>List Item 2</span>
  </li>
  <li><span>List Item 3</span>
  </li>
  <li><span>List Item 4</span>
  </li>
  <li><span>List Item 5</span>
  </li>
  <li><span>List Item 6</span>
  </li>
  <li><span>List Item 7</span>
  </li>
  <li><span>List Item 8</span>
  </li>
  <li><span>List Item 9</span>
  </li>
  <li><span>List Item 10</span>
  </li>
  <li><span>List Item 11</span>
  </li>
</ul>

I can list a rainbow, list a rainbow too.

希望这有帮助:-)