CSS黑魔法之计数器counter的使用技巧CSS计数器counter()的用法简介CSS计数器(序列数字字符自动递增)详解

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

初始化CSS计数器

为了好理解，我们使用

和
1. 元素来做演示。首先我们要重置计数器，让它归零，并给它指定一个名称：
   CSS Code复制内容到剪贴板

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

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

   CSS计数器的自增

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

   CSS Code复制内容到剪贴板

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

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

   使用计数值

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

   CSS Code复制内容到剪贴板

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

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

   假设有这样的HTML:

   XML/HTML Code复制内容到剪贴板

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

   我们这样来写：

   CSS Code复制内容到剪贴板

   1. ol.toc, ol.toc ol {   
   2.  countercounter-reset: toc;   
   3. }   
   4. ol li {   
   5.  countercounter-increment: toc;   
   6. }   
   7. .toc li:before {   
   8.  content: "(Item " counters(toc, ".") ")";   
   9. }  

   会输出下面的结果

   XML/HTML Code复制内容到剪贴板

   1. <ol class="toc">  
   2.  <li>(Item 1)Introli>  
   3.  <li>(Item 2)Topic   
   4.   <ol>  
   5.    <li>(Item 2.1)Subtopicli>  
   6.    <li>(Item 2.2)Subtopicli>  
   7.    <li>(Item 2.3)Subtopicli>  
   8.   ol>  
   9.  li>  
   10.  <li>(Item 3)Topic   
   11.   <ol>  
   12.    <li>(Item 3.1)Subtopicli>  
   13.    <li>(Item 3.2)Subtopicli>  
   14.    <li>(Item 3.3)Subtopicli>  
   15.   ol>  
   16.  li>  
   17.  <li>(Item 4)Closingli>     
   18. ol>  
       

   你可以发现，当需要显示这种联级嵌套序号时，这种技术是非常的有用的。很像微软WORD里面文档的多重序号。

   在 counter-reset 属性中，定义了一个随机 ID，其默认值是0。你可以在 counter-increment 属性中定义另外一个数字，作为计数的步长。

   例如：counter-increment: i 2 将值显示偶数。

   大多时候，CSS计数器都是配合:after和:before伪元素使用，我曾看到过有人在幻灯片、视频页面和文档里用过CSS计数器。相信你会找到其它可以使用它的地方。

   CSS 计数器进阶
   利用 CSS 计数器，能统计被用户选择的复选框个数：

   CSS Code复制内容到剪贴板

   1. "languages">     
   2.   "c" type="checkbox">"c">C   
   3.   "C++" type="checkbox">"C++">C++   
   4.   "C#" type="checkbox">"C#">C#   
   5.   "Java" type="checkbox">"Java">Java   
   6.   "JavaScript" type="checkbox">"JavaScript">JavaScript   
   7.   "PHP" type="checkbox">"PHP">PHP   
   8.   "Python" type="checkbox">"Python">Python   
   9.   "Ruby" type="checkbox">"Ruby">Ruby   

        
2. "total">     
3.   Total selected:   

4.      
5. .languages {   
6.   countercounter-reset: characters;   
7. }   
8. input:checked {     
9.   countercounter-increment: characters;   
10. }   
11. .total:after {   
12.   content: counter(characters);   
13. }