我看来，CSS计数器在web上还没有得到充分利用，尽管它们的支持非常好(IE8+)!。在本文中，我将解释如何在项目中使用CSS计数器，以及一些用例。
什么是CSS计数器计数器是css3提供的一个强大的工具，是一种可以让我们使用CSS给元素自动编号的方法。使用它可以很方便对页面中的任意元素进行计数，实现类似于有序列表的功能。但与有序列表相比，css计数器可以对任意元素计数，同时还可以实现个性化计数。
CSS 计数器的相关属性CSS 计数器需要三个属性，分别是：
counter-reset
counter-increment
counter()
「counter-reset」：属性用于定义和初始化一个或多个CSS计数器。它可以使用一个或多个标识符作为值，该值指定计数器的名称。
使用语法：counter-reset:[?]+|none|inherit
每个计数器名称后面都可以跟一个可选的值，该值指定计数器的初始值。
「注意：」
关键字
none，inherit和initial不能作为计数器名称；关键字none，inherit可以作为counter-reset属性的值。设置none将取消设置计数器；设置inherit将从元素的父元素处继承counter-reset值。该counter-reset属性的默认值为none。计数器的初始值不是计数器显示时的第一个数字/值。这意味着如果希望计数器从
1开始显示，则需要将counter-reset中的初始值设置为零。0是默认的初始值，所以如果省略它，默认情况下它将重置为零；counter-reset允许使用负值。因此，如果希望计数器从零开始显示，可以将其初始值设置为-1。
counter-increment属性用于指定一个或多个CSS计数器的增量值。它将一个或多个标识符作为值，指定要递增的计数器的名称。
使用语法：counter-increment:[?]+|none|inherit
每个计数器名称（标识符）后面都可以跟一个可选值，该值指定对于我们所编号的元素每次出现时，计数器需要递增多少。默认增量为1。允许零和负整数。如果指定了负整数，则计数器被递减。
counter-increment属性必须和counter-reset属性配合使用。
counter()函数必须和content属性一起使用，用来显示CSS计数器。它以CSS计数器名称作为参数，并作为值传递给content属性，而content属性就会使用:before伪元素将计数器显示为生成的内容。
counters()函数也有两种形式：counters(name,string)和counters(name,string,style)。
name参数也是要显示的计数器的名称。可以使用counter-reset属性来指定计数器的名称。而counters()函数与counter()函数（单数形式）区别在于：counters()函数可以用于设置嵌套计数器。
嵌套计数器是用于为嵌套元素（如嵌套列表）提供自动编号。如果你要将计数器应用于嵌套列表，则可以对第一级项目进行编号，例如，1，2，3等。第二级列表项目将编号为1.1，1.2，1.3等。第三级项目将是1.1.1，1.1.2，1.1.3，1.2.1，1.2.2，1.2.3等。
string参数用作不同嵌套级别的数字之间的分隔符。例如，在'1.1.2'中，点（'.'）用于分隔不同的级别编号。如果我们使用该counters()函数将点指定为分隔符，则它可能如下所示：
content:counters(counterName,".");
如果希望嵌套计数器由另一个字符分隔，例如，如果希望它们显示为“1-1-2”，则可以使用短划线而不是点作为字符串值：
content:counters(counterName,"-");
和counter()函数一样，style参数是用来定义计数器的风格。默认情况下，计数器使用十进制数字格式化。具体关于style参数的设置可以参照counter()函数的style参数。
假设我们有下面的 HTML:
Section
Section
Section
我想给每个title元素添加一个数字。为此，我将在父元素上定义一个计数器。
.content {
counter-reset: p;
}
这一步对于计数器的工作非常重要。在元素上，我将创建一个before伪元素，它将用于显示计数器的值。
h2:before {
counter-increment: p;
}
最后一步是使用counter()函数作为content属性的值。现在，添加了以下内容：
h2:before {
counter-increment: p;
content: counter(p);
}
接着，为before伪元素添加一些样式，让它看起来漂亮点：
事件源码：https://codepen.io/shadeed/pen/39b15fcd2669dc47bcb798a304960730?editors=1100
CSS 计数器用例 动态章节标题根据前面的示例，我们可以编辑before伪元素，如下所示
h2:before {
counter-increment: p;
content: "Section " counter(p);
display: block;
max-width: 80px;
font-size: 14px;
font-weight: normal;
background-color: rgba(#0277bd, 0.2);
border-radius: 20px;
text-align: center;
padding: 6px 8px;
margin-bottom: 0.75rem;
}
事件源码：https://codepen.io/shadeed/pen/866bb857f1194191d72d303f21f04481?editors=1100
嵌套计数器假设我们有以下列表:
- Design
- Web
- Mobile
- Graphic
- Web Development
- Mobile Development
- iOS
- Android
- Windows Phone
我们想让一级显示“1.”,二级对应“1.1”。为此，我们应该执行以下操作：
/* Defining a counter for the main list items */
.services {
counter-reset: services;
}
.services__item:before {
counter-increment: services;
content: counter(services) ".";
}
/* Defining a counter for the sub lists */
.services__item ul {
counter-reset: sub-services;
}
.services__item li:before {
counter-increment: sub-services;
content: counter(services) "." counter(sub-services);
}
事例源码：https://codepen.io/shadeed/pen/17324118e83c26676c797dd3950b2573
作者：Ahmad shaded 译者：前端小智 来源：sitepoint 原文：https://ishadeorddeed.com/article/overflow-css/
相关热门推荐
【第 232 期】JavaScript重构技巧-让函数简单明了
【第 231 期】CSS 中 关于 Overflow ，你需要了解的这些知识点！
CSS中的混合模式，制作高级特效的必备技巧
CSS 伪元素的一些罕见用例
我发现了7个关于 CSS backgroundImage 好用的技巧
Web 隐藏技术：几中隐藏 Web 中的元素方法及优缺点
Vue 中，如何将函数作为 props 传递给组件
如何写出优雅的 JS 代码，变量和函数的正确写法
「前端编程挑战 24」HTML+CSS3 实现粘性导航特效
5个很棒的 React.js 库，值得你亲手试试！
2020年面向前端开发人员的10个很棒的 JS 库
通过几个事例，就可以说明 for...of 循环在 JS 是不可或缺
