6

我有兴趣根据其位置动态设置列表项目旁边的图像。您可以在下面看到我正在使用 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 声明中工作的正确方法是什么？甚至可能吗？

4

3 回答 3

3

counter()函数只能用于content属性。URL 组合，就像您在上面尝试创建的那样，在 CSS 中是不可能的。

于 2013-03-27T09:58:16.893 回答
3

url 不能由多个字符串组成

例如，这项工作：

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

但这不起作用：

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

计数器与它无关

另一方面，您可以使用变量来做到这一点，请尝试查看 LessCSS 以获取 axample。

于 2013-03-27T10:32:59.873 回答
2

我不确定您要实现什么，但这是您认为有用的示例代码：示例代码

html

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

css

ul { counter-reset: list; }
li {
  counter-increment: list;
  list-style: disc outside url("http://placekitten.com/20/20");
}
li:before {
  counter-increment: section;
  content:"Item " counter(list) ". ";
}
于 2013-03-27T09:59:59.863 回答