html - URL 中的 CSS 计数器

Question

我有兴趣根据它的位置动态地设置列表项旁边的图像。您可以在下面看到我正在使用 CSS 的计数器功能来跟踪列表项，并且我正在尝试使用计数器将图像指定为列表样式类型。

ul{
    counter-reset:list;
}
li
{
    counter-increment:list;
    list-style:disc outside url("http://dummyimage.com/" counter(list) "x" counter(list) "");
}
<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

在 url 声明中让计数器工作的正确方法是什么？有可能吗？

Answer 1

url 不能由多个字符串组成

例如，这项工作:

url("http://dummyimage.com/10x10");

但这行不通:

url("http://dummyimage.com/" "10x10");

计数器与它无关

另一方面，您可以使用变量来做到这一点，尝试查看 LessCSS 的示例。