css - 使用 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

演示

Answer 1

在使用它之前，您需要将计数器重置为 0。

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 也是一个不错的选择。所以我不会删除我的答案；）