用于循环浏览多个图像以装饰无序列表项目符号的 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-imagecss 属性的一部分：

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>