CSS黑魔法之计数器counter的使用技巧

计数器(counter)，“老一辈”程序员估计对这个东西印象深刻，早期的网站页面上经常会有这个东西，如今这种特征都变成了笑话。CSS里自己实现了一种计数器，很简单，很直接。使用CSS计数器，你可以实现简单的纯CSS的计数功能，并能将其显示到页面上。下面我们简单的看一下CSS计数器是如何使用的！

初始化CSS计数器

为了好理解，我们使用<OL> 和 <LI> 元素来做演示。首先我们要重置计数器，让它归零，并给它指定一个名称：

1. ol.slides {   
2.  countercounter-reset: slideNum;   
3. }  

这个计数器叫slideNum，下面的例子都都要使用它。

CSS计数器的自增

为了是计数器能够自增，我们需要使用counter-increment，并把计数器的名称跟到后面：

1. ol.slides > li {   
2.  countercounter-increment: slideNum;   
3. }  

这样，在CSS选择器下，每遇到一个符合条件li元素，counter-increment就会被调用一次，计数就是增加1。需要注意的是，这里的CSS选择器里使用了>符号，这样是为了滤掉有可能多重嵌套的li元素。否者你的计数值就会不是你想要的。

使用计数值

如果只计数而无法显示，那这个计数器也没多大用处，所以就有了counter()命令来输出计数器里的值，可以用在content属性里：

1. ol.slides li:after {   
2.  content: "[" counter(slideNum) "]";   
3. }  

有趣的是，这个counter()命令还可以接受第二个参数，当作同时计算多个元素时数据的分隔符：

假设有这样的HTML:

1. <ol class="toc">  
2.  <li>Intro</li>  
3.  <li>Topic   
4.   <ol>  
5.    <li>Subtopic</li>  
6.    <li>Subtopic</li>  
7.    <li>Subtopic</li>  
8.   </ol>  
9.  </li>  
10.  <li>Topic   
11.   <ol>  
12.    <li>Subtopic</li>  
13.    <li>Subtopic</li>  
14.    <li>Subtopic</li>  
15.   </ol>  
16.  </li>  
17.  <li>Closing</li>     
18. </ol>  

我们这样来写：

1. ol.toc, ol.toc ol {   
2.  countercounter-reset: toc;   
3. }   
4. ol li {   
5.  countercounter-increment: toc;   
6. }   
7. .t