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 for axample。

Answer 2

counter()函數只能用於content屬性。網址的組成，就像上面要創建的網址一樣，在CSS中是不可能的。

Answer 3

我不知道，你想什麼來實現的，但這裏的，你介意找到有用的代碼示例：sample code

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) ". "; 
}