玩转CSS Counter

2022-07-09 16:53:14

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

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计数实现文章中图片自动编号。

<article class="imgList">
	<figure class="figure figure-right">
		<img src="http://gx.zptc.cn/whqet/img/1.jpg" />
	  	<figcaption>图片标题</figcaption>
	</figure>
	<figure class="figure figure-right">
		<img src="http://gx.zptc.cn/whqet/img/2.jpg" />
	  	<figcaption>图片标题</figcaption>
	</figure>
	<figure class="figure figure-right">
		<img src="http://gx.zptc.cn/whqet/img/3.jpg" />
	  	<figcaption>图片标题</figcaption>
	</figure>
	<figure class="figure figure-right">
		<img src="http://gx.zptc.cn/whqet/img/4.jpg" />
	  	<figcaption>图片标题</figcaption>
	</figure>
	<figure class="figure figure-right">
		<img src="http://gx.zptc.cn/whqet/img/5.jpg" />
	  	<figcaption>图片标题</figcaption>
	</figure>
</article>

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-。

4.应用案例

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

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

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

<ol>
  <li>item</li>          <!-- 1     -->
  <li>item               <!-- 2     -->
    <ol>
      <li>item</li>      <!-- 2.1   -->
      <li>item</li>      <!-- 2.2   -->
      <li>item           <!-- 2.3   -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4   -->
    </ol>
  </li>
  <li>item</li>          <!-- 3     -->
  <li>item</li>          <!-- 4     -->
</ol>
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item</li>          <!-- 2     -->
</ol>

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

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

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

然后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;
}

OK，That‘s all, Thank you.