html - 用于循环遍历多个图像以装饰无序列表元素符号的 CSS

Question

我想用一组图像中的一个替换一个元素符号

<ul>
    <li> List item 1 </li>
    <li> list item 2 </li>
    <li> List item 3 </li>
    <li> List item 4 </li>
</ul>

我知道可以在 css 中将图像定义为 list-style-image 的一部分CSS 属性:

ul{
list-style-image: url('/images/circle.jpg');
}

但这是将单个图像应用于所有元素符号。我想做的是提供一系列图像，并让每个元素符号依次显示列表中的不同图像，并适当换行。

例如，如果我提供了一系列图像 ['red.jpg','amber.jpg','green.jpg'] ，如果我将其应用于 8 个元素符号的无序列表，我希望它使用序列中的图像装饰这些列表项 [red, amber, green, red, amber, green, red, amber] .

有没有<ul>或 <li>样式的方法，或者我应该单独构建一些其他标记来做同样的事情，只是不使用 <ul>/<li> ？

例如我最接近下面的是什么？

ul.traffic_lights {
list-style-image: [url('/images/red_circle.jpg', url('/images/amber_circle.jpg', url('/images/green_circle.jpg');
}

Answer 1

nth-of-type 应该这样做。

您可以根据需要调整样式，但这会设置模式。

li {
  font-size: 2em;
}

li:nth-of-type(3n+1) {
  color: red;
}

li:nth-of-type(3n+2) {
  color: yellow;
}

li:nth-of-type(3n+3) {
  color: green;
}

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