用CSS計數器添加一個自動增量值

Question

我想通過CSS添加一個增量值，但顯然我做錯了什麼。

HTML

<ul role="menu" style="left: 0px; position: absolute; top: 0px;"> 
    <li id="Slideshow-13675338798500"> 
    <a class="slideshow-thumbnails-hidden" href="images/slideshow/slide-1.png" role="menuitem" tabindex="0"> 
    <span class="thmubbutton"></span> 
    </a> 
    </li> 
    <li id="Slideshow-13675338798501"> 
    <a class="slideshow-thumbnails-hidden" href="images/slideshow/slide-2.png" role="menuitem" tabindex="1"> 
    <span class="thmubbutton"></span> 
    </a> 
    </li> 
    <li id="Slideshow-13675338798502"> 
    <a class="slideshow-thumbnails-hidden" href="images/slideshow/slide-3.png" role="menuitem" tabindex="2"> 
    <span class="thmubbutton"></span> 
    </a> 
    </li> 
</ul> 

---

CSS

span.thmubbutton{ 
    counter-increment: myIndex; 
} 

span.thmubbutton:before 
{ 
content:counter(myIndex); 
} 

輸出是1 | 1 | 1

DEMO

Answer 1

使用前需要將計數器清零。

body { 
    counter-reset: myIndex; 
} 

小提琴：http://jsfiddle.net/ZgEgS/1/

上的計數器此處瞭解詳情：https://developer.mozilla.org/en-US/docs/CSS/Counters

Answer 2

我不認爲CSS本身支持這一點。有一種叫做LESS（http://lesscss.org/）的支持增量。試着給它一個旋轉。

編輯：沒關係......我相信我錯了。儘管如此，LESS也是一個很好的選擇。所以我不會刪除我的答案;）