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

在使用之前，您需要将计数器重置为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也是一个不错的选择。所以我不会删除我的答案;）

使用css计数器添加自动增量值

2 个答案: