你可能不知道的CSS 计数器

前言

CSS 里面的伪元素实际上是很是好用的，可是常常容易被你们忽略，伪元素里面经常使用到的 content 属性，可能如今不少人仅仅觉得 content 属性的值只支持字符串，除了字符串外经常使用到的还有 uri、counter ，今天所要介绍的就是 conter(计数器)。

先看以下的例子：

<div>
  <h3>桃翁</h3>
  <h3>介绍</h3>
  <h3>css 计数器</h3>
</div>

根据如上的 HTML 你是否有办法不经过 JavaScript ，仅仅用 CSS 在 title 前面增长 Title number: 呢？

CSS 计数器基本概念

若是仅仅增长一个 Title，你们都知道经过伪元素(:before或者:after)，设置 content 为 Title，可是如何自动根据 h3 出现的顺序来展现自动编号可能不少人就不知道了。

自动编号在 CSS 2.1 中是经过两个属性控制的，'counter-increment'和'counter-reset'。经过这些属性定义的计数器用于'content’属性的 counter() 和 counters() 函数

初始化计数器

在使用计数器的时候须要先初始化这个计数器，而且设置一个计数器的名字(变量)。下面是例子，title 就是名字，conter-reset 就是用来初始化的，这个属性是必须设置的，不然没办法用计数器。

'counter-reset'属性也含有一列一个或多个计数器，每一个后面能够跟一个可选的整数。该整数给定了每次出现该元素时给计数器设置的值，默认为 0

counter-reset: 计数器名称[, 默认值number];           /* 重置计数器成0 */

计数器自增

有了一个计数器的变量后，而后可让这个变量进行自增：

'counter-increment'属性接受一个或多个计数器名（标识符），每一个后面均可以跟一个可选的整数。这个整数表示每次出现该元素时计数器递增几。默认增量是 1，能够接受 0 和负数

counter-increment: 计数器名称[, 增量];      /* 增长计数器值 */

显示计数器

最后就是现实计数器的值，获取计数器的值有两个函数：counter() 和 counters() ，如上面的例子：

content: counter(计数器名称[, 显示的风格]) /* 显示计数器 */

或者

counters(计数器名称, 嵌套时拼接字符串[, 可选的显示风格])

基本使用

学完了基本概念，而后就能够解决上面的问题了。按照步骤来，三步：

1. 初始化计时器

div {
  counter-reset: title;           /* 重置计数器成0 */
}

1. 计数器自增

h3:before {
  counter-increment: title;      /* 增长计数器值 */
}

1. 显示计数器

h3:before {
  content: "Title " counter(title) ": "; /* 显示计数器 */
}

合起来的解决方案以下：

div {
  counter-reset: title;           /* 重置计数器成0 */
}
h3:before {
  counter-increment: title;      /* 增长计数器值 */
  content: "Title " counter(title) ": "; /* 显示计数器 */
}

高级用法

嵌套计数器与做用域

计数器是“自嵌套的（self-nesting）”，若是重置一个位于后代元素或者伪元素中的计数器，会自动建立一个新的计数器实例。这对 HTML 中的列表之类的场景来讲很重要，这种场景下，元素自身能够嵌套任意深度，不用为每一层定义惟一命名的计数器

计数器的做用域从文档中具备 'counter-reset'该计数器的第一个元素开始，包括该元素的后代、后续兄弟及其后代。

官方套话比较难懂，用大白话说就是设置了 counter-reset ，那么这个元素的的子元素都属于这个做用域下。

想要彻底理解做用域，就得把下面这个 图看懂：

<img src="http://imgs.taoweng.site/2019-12-09-142219.png" style="zoom:50%;" />

上面的这个 HTML 代码，再加上这段 CSS 代码：

OL { counter-reset: item }
LI { display: block }
LI:before { 
  counter-increment: item 
}

OL 将会建立一个计数器，而且 OL 的全部子级将引用该计数器，若是咱们用item[n]表示"item"计数器的第 n个实例，用"{"和"}"表示一个做用域的开始和结束，那么上面 HTML 片断将使用标注的计数器。

注意看 2.3.1 的两个元素，因为他们都在 2.3 下面，有两个同名的计数器，那么这两个同名计数器会分别建立实例，全部会获得两个 2.3.1。

若是懂了做用域的关系，接下来就能够经过 counter() 或者 counters() 函数进行展现。

counter

Counter 显示代码以下：

OL { counter-reset: item }
LI { display: block }
LI:before { 
  content: counter(item) ". "; 
  counter-increment: item 
}

效果以下：

能够看到 counter 只会显示当前做用域下计数器的值，若是要生成嵌套做用域的计数器就得用 counters 函数。

counters

OL { counter-reset: item }
LI { display: block }
LI:before { 
  content: counters(item, '.') " "; 
  counter-increment: item;
}

更换格式

在显示计数器部分 counter 和 counters 都有一个可选参数，显示风格，这个显示风格跟 list-style-type 是同样的，好比咱们将文章开头的例子拿来举例，默认是 decimal 风格，好比换成字母(type 是 lower-latin)形式，css 以下：

div {
  counter-reset: title;           /* 重置计数器成0 */
}
h3:before {
  counter-increment: title;      /* 增长计数器值 */
  content: "Title " counter(title, lower-latin) ": "; /* 显示计数器 */
}

效果以下，list-style-type 有不少种，甚至还有中文(list-style-type 是 cjk-ideographic)的。

自定义起始值

起始值订为 5

div {
  counter-reset: title 5;           /*起始值订为 5 */
}
h3:before {
  counter-increment: title;      
  content: "Title " counter(title) ": "; 
}

自定义每次递增的值

每次递增的值为 2

div {
  counter-reset: title 5;       
}
h3:before {
  counter-increment: title 2;      /* 每次递增的值为 2 */
  content: "Title " counter(title) ": "; 
}

使用场景

场景 1： 嵌套列表

好比要生成一个文章的大纲：

场景2： 计算已经勾选的复选框

使用输入框的：checked 伪类，咱们能够检查复选框是否被选中，选中的话，咱们计数器的数值就会增长。

下面的这个 2 种菜系直接就是能够经过计数器来实现的，不须要使用 js

场景3： 自动追踪文档条目

当你须要处理一些重复元素的时候，而且你一样想统计他们的数量，那么这个方案会很好用。

参考文章

• css计数器详解

欢迎关注个人公众号「前端桃园」