玩转CSS Counter

CSS Counter（CSS 计数）可以允许我们使用css对页面中的任意元素进行计数，实现类似于有序列表的功能，灵活使用CSS Counter可以让我们在进行文档排版、页面布局时事半功倍，好的，请大家摩摩拳擦擦掌，精彩内容马上呈现。

1.操作计数

CSS计数（css counter）主要依靠两个属性来实现计数的操作。

counter-reset，将指定计数器复位

counter-increment，设定计数器的变化（增加的值）

1.1 counter-reset

[css] view plaincopy

1. 语法：  
2.     counter-reset: [<user-ident> <integer>?]+ | none  
3.   
4. 其中，user-ident为需要复位的计数器名称  
5.       integer为计数器复位值  
6.       none 不计数，默认值  

counter-reset可以只指定计数器（计数器的默认复位值为0），也可以同时指定计数器和复位值，也可以同时指定若干计数器，如下面代码所示。

[css] view plaincopy

1. someSelector{  
2.     /*some other code*/  
3.   
4.     counter-reset: counterA;  /*计数器counterA 复位，复位值为0*/  
5.     counter-reset: counterA 6;  /*计数器counterA 复位，复位值为6*/  
6.     counter-reset: counterA 4 counterB;  /*计数器counterA 复位，复位值为4，计数器counterB复位，复位值为0*/  
7.     counter-reset: counterA 4 counterB 2;  /*计数器counterA 复位，复位值为4，计数器counterB复位，复位值为2*/  
8. }  

1.2 counter-increment

[css] view plaincopy

1. 语法：  
2.     counter-increment: [<user-ident> <integer>?]+ | none  
3.   
4. 其中，user-ident 为需要改变的计数器名称  
5.       integer 为计数器改变值，可以为正值也可以为负值，可以同时改变多个计数器  
6.       none 阻止计数器增加，默认值  

代码示例如下。

[css] view plaincopy

1. someSelector{  
2.     /*some other code*/  
3.   
4.     counter-increment: counterA;  /* 增加CounterA，每次加1 */  
5.     counter-increment: counterA 2;  /* 计数器counterA，每次加2 */  
6.     counter-increment: counterA 2 counterB -1;  /* counterA，每次加2，同时counterB每次减1*/  
7. }  

2.呈现内容

我们需要通过的::before,::after等伪对象配合content属性来呈现计数。content跟计数相关的属性值有以下几种

[css] view plaincopy

1. 语法：  
2.     content:counter(name)   
3.             counter(name,list-style-type)  
4.             counters(name,string)  
5.             counters(name,string,list-style-type)  

3.使用计数

3.1图片自动编号

我们来看一个例子，通过css计数实现文章中图片自动编号。

[html] view plaincopy

1. <article class="imgList">  
2.     <figure class="figure figure-right">  
3.         <img src="http://gx.zptc.cn/whqet/img/1.jpg" />  
4.         <figcaption>图片标题</figcaption>  
5.     </figure>  
6.     <figure class="figure figure-right">  
7.         <img src="http://gx.zptc.cn/whqet/img/2.jpg" />  
8.         <figcaption>图片标题</figcaption>  
9.     </figure>  
10.     <figure class="figure figure-right">  
11.         <img src="http://gx.zptc.cn/whqet/img/3.jpg" />  
12.         <figcaption>图片标题</figcaption>  
13.     </figure>  
14.     <figure class="figure figure-right">  
15.         <img src="http://gx.zptc.cn/whqet/img/4.jpg" />  
16.         <figcaption>图片标题</figcaption>  
17.     </figure>  
18.     <figure class="figure figure-right">  
19.         <img src="http://gx.zptc.cn/whqet/img/5.jpg" />  
20.         <figcaption>图片标题</figcaption>  
21.     </figure>  
22. </article>  

css文件实现计数

[css] view plaincopy

1. * {  
2.     padding: 0;  
3.     margin:0;  
4. }  
5. article.imgList {  
6.     /*counter-reset: imgCounter;*/  
7.     counter-reset: imgCounter 10;  
8. }  
9. article.imgList figure {  
10.     /*counter-increment: imgCounter;*/  
11.     counter-increment: imgCounter -1;  
12.     width: 640px;  
13.     position: relative;  
14. }  
15. article.imgList figure figcaption {  
16.     position: absolute;  
17.     width: 640px;  
18.     height: 40px;  
19.     line-height: 40px;  
20.     text-indent: 20px;  
21.     background-color:rgba(0, 0, 0, .2);  
22.     left: 0;  
23.     bottom:0;  
24.     color: #fff;  
25. }  
26. article.imgList figure figcaption:before {  
27.     content:"Fig."counter(imgCounter);  
28.     margin-right: 1em;  
29. }  

3.2浏览器支持

看看caniuse的兼容性表格，全线飘绿，大家可以放心使用，除了IE8-。

4.应用案例

css计数可以应用在文档排版中，实现图片、表格的排序，也可以用在文章、新闻列表等场合，不但可以用在ol、ul、dl等列表元素中，也可以用在任意的html元素中，达到计数效果，也请大家留言发表自己的高见，这里看几个效果。

4.1 嵌套编号(MDN案例,参见使用css计数器)

[css] view plaincopy

1. ol {  
2.   counter-reset: section;                /* 为每个ol元素创建新的计数器实例 */  
3.   list-style-type: none;  
4. }  
5. li:before {  
6.   counter-increment: section;            /* 只增加计数器的当前实例 */  
7.   content: counters(section, ".") " ";   /* 为所有计数器实例增加以“.”分隔的值 */  
8. }  

[css] view plaincopy

1. <ol>  
2.   <li>item</li>          <!-- 1     -->  
3.   <li>item               <!-- 2     -->  
4.     <ol>  
5.       <li>item</li>      <!-- 2.1   -->  
6.       <li>item</li>      <!-- 2.2   -->  
7.       <li>item           <!-- 2.3   -->  
8.         <ol>  
9.           <li>item</li>  <!-- 2.3.1 -->  
10.           <li>item</li>  <!-- 2.3.2 -->  
11.         </ol>  
12.         <ol>  
13.           <li>item</li>  <!-- 2.3.1 -->  
14.           <li>item</li>  <!-- 2.3.2 -->  
15.           <li>item</li>  <!-- 2.3.3 -->  
16.         </ol>  
17.       </li>  
18.       <li>item</li>      <!-- 2.4   -->  
19.     </ol>  
20.   </li>  
21.   <li>item</li>          <!-- 3     -->  
22.   <li>item</li>          <!-- 4     -->  
23. </ol>  
24. <ol>  
25.   <li>item</li>          <!-- 1     -->  
26.   <li>item</li>          <!-- 2     -->  
27. </ol>  

4.2 编号表格单元格，到codepen在线玩弄代码

html简单，就是弄个表格，里面没东西

[html] view plaincopy

1. <table>  
2.   <tr>  
3.     <td></td>  
4.     <td></td>  
5.     <td></td>  
6.     <td></td>  
7.     <td></td>  
8.     <td></td>  
9.     <td></td>  
10.     <td></td>  
11.   </tr>  
12.   <tr>  
13.     <td></td>  
14.     <td></td>  
15.     <td></td>  
16.     <td></td>  
17.     <td></td>  
18.     <td></td>  
19.     <td></td>  
20.     <td></td>  
21.   </tr>  
22.   <tr>  
23.     <td></td>  
24.     <td></td>  
25.     <td></td>  
26.     <td></td>  
27.     <td></td>  
28.     <td></td>  
29.     <td></td>  
30.     <td></td>  
31.   </tr>  
32.   <tr>  
33.     <td></td>  
34.     <td></td>  
35.     <td></td>  
36.     <td></td>  
37.     <td></td>  
38.     <td></td>  
39.     <td></td>  
40.     <td></td>  
41.   </tr>  
42.   <tr>  
43.     <td></td>  
44.     <td></td>  
45.     <td></td>  
46.     <td></td>  
47.     <td></td>  
48.     <td></td>  
49.     <td></td>  
50.     <td></td>  
51.   </tr>  
52.   <tr>  
53.     <td></td>  
54.     <td></td>  
55.     <td></td>  
56.     <td></td>  
57.     <td></td>  
58.     <td></td>  
59.     <td></td>  
60.     <td></td>  
61.   </tr>  
62.   <tr>  
63.     <td></td>  
64.     <td></td>  
65.     <td></td>  
66.     <td></td>  
67.     <td></td>  
68.     <td></td>  
69.     <td></td>  
70.     <td></td>  
71.   </tr>  
72.   <tr>  
73.     <td></td>  
74.     <td></td>  
75.     <td></td>  
76.     <td></td>  
77.     <td></td>  
78.     <td></td>  
79.     <td></td>  
80.     <td></td>  
81.   </tr>  
82. </table>  

然后CSS实现对每个单元格的编号，鼠标悬停时显示编号。

[css] view plaincopy

1. /* 
2. * 主要实现表格整体设置，实现圆角表格 
3. * 重置计数行计数（rowNumber） 
4. **/  
5. table{  
6.   width:400px;  
7.   border-radius:20px;  
8.   margin:50px auto;  
9.   border-collapse: separate;  
10.   border: 1px solid rgba(0,0,0,.2);  
11.   border-spacing:0;  
12.   counter-reset:rowNumber;  
13.   box-shadow: 0 0 10px rgba(0,0,0,.2);  
14. }  
15. tr:first-child td:first-child{  
16.   border-radius:20px 0 0 0;  
17. }  
18. tr:first-child td:last-child{  
19.   border-radius:0 20px 0 0;  
20. }  
21. tr:last-child td:first-child{  
22.   border-radius:0 0 0 20px;  
23. }  
24. tr:last-child td:last-child{  
25.   border-radius:0 0 20px 0;  
26. }  
27. /* 
28. * 表行 
29. *   增加行计数（rowNumber） 
30. *   重置列计数（tdNumber） 
31. **/  
32. tr{  
33.   counter-increment:rowNumber;  
34.   counter-reset:tdNumber;  
35. }  
36. /* 
37. * 单元格设置 
38. *   增加列计数（tdNumber） 
39. **/  
40. td{  
41.   width:50px;  
42.   height:40px;  
43.   background:rgba(0,0,0,.1);  
44.   border: 1px solid rgba(0,0,0,.2);  
45.   box-size: border-box;  
46.   text-align: center;  
47.   counter-increment:tdNumber;  
48.   cursor: pointer;  
49. }  
50. td:nth-child(2n){  
51.   background:rgba(0,0,0,.15);  
52. }  
53. /* 
54. * 使用行计数（rowNumber）和列计数（tdNumber） 
55. **/  
56. td::after{  
57.   content:counter(rowNumber,upper-alpha) counter(tdNumber);  
58.   opacity: 0;  
59.   transition:all 1s;  
60. }  
61. td:hover::after{  
62.   opacity: 1;  
63. }  

大家可以到codepen欣赏另一个综合使用css counter的案例。

OK，That's all, Thank you.