玩转CSS Counter

迷南。 2022-08-26 14:14 143阅读 0赞

前端开发whqet,csdn,王海庆,whqet,前端开发专家

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

![SouthEast][]

## 1.操作计数 ##

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

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

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

### 1.1 counter-reset ###

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

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

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

### 1.2 counter-increment ###

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

代码示例如下。

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

## 2.呈现内容 ##

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

语法：
    	content:counter(name) 
    	        counter(name,list-style-type)
    	        counters(name,string)
    	        counters(name,string,list-style-type)

## 3.使用计数 ##

### 3.1图片自动编号 ###

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

css文件实现计数

* {
        padding: 0;
        margin:0;
    }
    article.imgList {
        /*counter-reset: imgCounter;*/
        counter-reset: imgCounter 10;
    }
    article.imgList figure {
        /*counter-increment: imgCounter;*/
        counter-increment: imgCounter -1;
        width: 640px;
        position: relative;
    }
    article.imgList figure figcaption {
        position: absolute;
        width: 640px;
        height: 40px;
        line-height: 40px;
        text-indent: 20px;
        background-color:rgba(0, 0, 0, .2);
        left: 0;
        bottom:0;
        color: #fff;
    }
    article.imgList figure figcaption:before {
        content:"Fig."counter(imgCounter);
        margin-right: 1em;
    }

### 3.2浏览器支持 ###

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

![SouthEast 1][]

## 4.应用案例 ##

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

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

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

### 4.2 编号表格单元格，到codepen[在线玩弄][Link 2]代码 ###

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

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

/*
    * 主要实现表格整体设置，实现圆角表格
    * 重置计数行计数（rowNumber）
    **/
    table{
      width:400px;
      border-radius:20px;
      margin:50px auto;
      border-collapse: separate;
      border: 1px solid rgba(0,0,0,.2);
      border-spacing:0;
      counter-reset:rowNumber;
      box-shadow: 0 0 10px rgba(0,0,0,.2);
    }
    tr:first-child td:first-child{
      border-radius:20px 0 0 0;
    }
    tr:first-child td:last-child{
      border-radius:0 20px 0 0;
    }
    tr:last-child td:first-child{
      border-radius:0 0 0 20px;
    }
    tr:last-child td:last-child{
      border-radius:0 0 20px 0;
    }
    /*
    * 表行
    *   增加行计数（rowNumber）
    *	重置列计数（tdNumber）
    **/
    tr{
      counter-increment:rowNumber;
      counter-reset:tdNumber;
    }
    /*
    * 单元格设置
    *   增加列计数（tdNumber）
    **/
    td{
      width:50px;
      height:40px;
      background:rgba(0,0,0,.1);
      border: 1px solid rgba(0,0,0,.2);
      box-size: border-box;
      text-align: center;
      counter-increment:tdNumber;
      cursor: pointer;
    }
    td:nth-child(2n){
      background:rgba(0,0,0,.15);
    }
    /*
    * 使用行计数（rowNumber）和列计数（tdNumber）
    **/
    td::after{
      content:counter(rowNumber,upper-alpha) counter(tdNumber);
      opacity: 0;
      transition:all 1s;
    }
    td:hover::after{
      opacity: 1;
    }

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

OK，That's all, Thank you.

## 5.参考文献 ##

1.[使用CSS计数器- Web 开发者指南| MDN][css]

2.[CSS content, counter-increment 和counter-reset详解][CSS content_ counter-increment _counter-reset]

3.[counter-reset | CSS-Tricks][counter-reset _ CSS-Tricks]

4.[counter-increment | CSS-Tricks][counter-increment _ CSS-Tricks]

5.[Can I use CSS Counters][]

6. [如何从css生成内容和计数组件中得到益处][css 1]

\---------------------------------------------------------------

[前端开发whqet][whqet]，关注web前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[SouthEast]: /images/20220824/2b3d8683355b4f808e9c9fbc32409459.png
[Link 1]: http://codepen.io/whqet/pen/mpIha/
[SouthEast 1]: /images/20220824/b252cb85002b47219b4edd5e3b7f18b9.png
[MDN]: http://codepen.io/whqet/pen/gezay/
[css]: https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Counters
[Link 2]: http://codepen.io/whqet/pen/rnpgm
[Link 3]: http://codepen.io/whqet/pen/FbIoJ
[CSS content_ counter-increment _counter-reset]: http://www.qianduan.net/css-content-counter-increment-counter-reset.html
[counter-reset _ CSS-Tricks]: http://css-tricks.com/almanac/properties/c/counter-reset/
[counter-increment _ CSS-Tricks]: http://css-tricks.com/almanac/properties/c/counter-increment/
[Can I use CSS Counters]: http://caniuse.com/css-counters
[css 1]: http://www.w3cplus.com/css3/css-generated-content-counters.html
[whqet]: http://blog.csdn.net/whqet