你可能不知道CSS计数器

前言CSS中的伪元素其实非常有用，但往往被大家所忽视。伪元素中常用的content属性，现在可能很多人只会想到。支持字符串。除了字符串，还常用uri和counter。今天要介绍的是conter（计数器）。先看下面这个例子：

根据上面的HTML，你有没有不通过JavaScript的方法，只需在标题前添加Titlenumber:withCSS？CSS计数器的基本概念如果只加一个Title，大家都知道通过伪元素（:before或:after）将内容设置为Title，但是很多人可能不知道如何根据自动编号自动显示到h3出现的顺序。自动编号在CSS2.1中由两个属性控制，“counter-increment”和“counter-reset”。由这些属性定义的计数器在“content”属性的counter()和counters()函数中用于初始化计数器。使用计数器时，需要先对计数器进行初始化，并设置一个计数器名称（变量）。下面是一个例子，title是名字，conter-reset是用来初始化的，这个属性必须要设置，否则计数器是没法用的。'counter-reset'属性还包含一个或多个计数器的列表，每个计数器可选地后跟一个整数。整数指定每次元素出现时设置给计数器的值，默认为0counter-reset:countername[,defaultvaluenumber];/*resetthecounterto0*/counterself-increment有一个counter变量，然后变量可以递增：'counter-increment'属性接受一个或多个计数器名称（标识符），每个可选地后跟一个整数。这个整数表示每次元素出现时计数器增加多少。默认增量为1，可接受0和负数counter-increment:countername[,increment];/*增加计数器值*/最后显示计数器值是计数器的实际值，获取计数器值有两个函数：counter()和counters()，如上例：content:counter(countername[,displaystyle])/*displaycounter*/orcounters(countername,concatenatedstringwhennested[,optionaldisplaystyle])基本使用了解了基本概念后，就可以解决上面的问题了。按照步骤进行，三步：初始化定时器div{counter-reset:title;/*将计数器重置为0*/}计数器递增h3:before{counter-increment:title;/*增加计数器值*/}displayCounterh3:before{content:"Title"counter(title)":";/*显示计数器*/}组合方案如下：div{counter-reset:title;/*将计数器重置为0*/}h3:before{counter-increment:title;/*增加计数器值*/content:"Title"counter(title)":";/*显示计数器*/}高级用法嵌套计数器和作用域计数器是“自嵌套集合（self-nesting）”，如果重置一个位于后代元素或伪元素中的计数器，将自动创建一个新的计数器实例.这对于像HTML中的列表这样的场景很重要，元素本身可以嵌套任意深度，而无需为每一层定义唯一命名的计数器'从这个计数器的第一个元素开始，包括元素的后代、后续的兄弟姐妹和它们的后代。官方的公式比较难理解，用大白话来说，如果设置了counter-reset，那么这个元素的子元素都属于这个范围。如果你想完全理解范围，你必须理解下面这张图：“/>上面这段HTML代码，加上这段CSS代码：OL{counter-reset:item}LI{display:block}LI:before{counter-increment:item}OL会创建一个计数器，OL的所有children都会参考这个柜台。如果我们使用item[n]来表示“item”计数器的第n个实例，并使用“{”和“}”来表示范围的开始和结束，那么上面的HTML片段将使用注解计数器。注意2.3.1的两个要素。由于都是2.3以下，并且有两个同名的counter，那么这两个同名的counter会分别创建实例，所以会得到两个2.3.1。如果你了解作用域关系，那么你可以使用counter()或counters()函数来显示它。counterCounter显示代码如下：OL{counter-reset:item}LI{display:block}LI:before{content:counter(item)".";counter-increment:item}效果如下：可以看到counter只会显示当前scope下counter的值，如果要生成嵌套scope的counter就得用counters功能。countersOL{counter-reset:item}LI{display:block}LI:before{content:counters(item,'.')"";counter-increment:item;}替换格式在显示计数器部分，有一个counter和counters可选参数，显示样式。这种显示风格与list-style-type相同。例如，我们以文章开头的例子为例。默认为小数样式，比如改为字母（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）。自定义起始值起始值设置为5div{counter-reset:title5;/*起始值设置为5*/}h3:before{counter-increment:title;内容：“标题”计数器（标题）“：”；}自定义每个增量的值每个增量的值为2div{counter-reset:title5;}h3:before{反增量：标题2；/*每次递增的值为2*/content:"Title"counter(title)":";}使用场景场景一：嵌套列表比如生成一篇文章的大纲：场景二：使用输入框计算选中的复选框：checked伪类，我们可以检查复选框是否被选中，以及如果是这样，我们的计数器将增加。下面两种菜系可以直接通过柜台实现，不用js场景三：自动跟踪文档条目当你需要处理一些重复的元素，又想统计它们的个数时，这个方案会非常好用easy使用。参考文章css计数器详解欢迎关注我的公众号“前端桃园”