CSS计数器counter的使用技巧

这篇文章主要介绍“CSS计数器counter的使用技巧”，在日常操作中，相信很多人在CSS计数器counter的使用技巧问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS计数器counter的使用技巧”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

为金平等地区用户提供了全套网页设计制作服务，及金平网站建设行业解决方案。主营业务为成都网站建设、网站建设、金平网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

初始化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.   

   2.  

   3. Intro
     

   4.  

   5. Topic   

   6.   

        

      1.    

      2. Subtopic
        

      3.    

      4. Subtopic
        

      5.    

      6. Subtopic
        

      7.   

        

   7.  

     

   8.  

   9. Topic   

   10.   

         

       1.    

       2. Subtopic
         

       3.    

       4. Subtopic
         

       5.    

       6. Subtopic
         

       7.   

         

   11.  

     

   12.  

   13. Closing
        

     

我们这样来写：

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.   

2.  

3. (Item 1)Intro
  

4.  

5. (Item 2)Topic   

6.   

     

   1.    

   2. (Item 2.1)Subtopic
     

   3.    

   4. (Item 2.2)Subtopic
     

   5.    

   6. (Item 2.3)Subtopic
     

   7.   

     

7.  

  

8.  

9. (Item 3)Topic   

10.   

      

    1.    

    2. (Item 3.1)Subtopic
      

    3.    

    4. (Item 3.2)Subtopic
      

    5.    

    6. (Item 3.3)Subtopic
      

    7.   

      

11.  

  

12.  

13. (Item 4)Closing
     

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

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

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

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

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

CSS Code复制内容到剪贴板

1.      

2.   C   

3.   C++   

4.   C#   

5.   Java   

6.   JavaScript   

7.   PHP   

8.   Python   

9.   Ruby