小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
计数器
什么是计数器
CSS 中的计数器本质上来说就是由 CSS 维护的变量，计数器的值可以通过 CSS 规则递增来跟踪计数器的使用次数，例如可以使用计数器来自动为网页中的标题编号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计数器</title>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
counter-reset: aa;
}
ul li{
counter-increment: aa;
}
ul li::before{
content: counter(aa)".";
}
ol {
list-style: none;
/* padding: 0; */
margin: 0;
counter-reset: AA;
}
ol li{
counter-increment: AA;
}
ol li::before{
content: counters(AA,".")" ";
}
</style>
</head>
<body>
<ul>
<li>小米</li>
<li>华为</li>
<li>魅族</li>
</ul>
<ol>
<li>小米手机
<ol>
<li>小米
<ol>
<li>小米10</li>
<li>小米10 pro</li>
<li>小米 9</li>
</ol>
</li>
<li>红米
<ol>
<li>红米 note</li>
<li>红米 note pro</li>
<li>红米 K30</li>
</ol>
</li>
<li>mi</li>
</ol>
</li>
<li>华为</li>
<li>魅族</li>
</ol>
</body>
</html>
如上述示例所示，操作计数器的值是通过如下 2 个属性实现：
- counter-reset 属性
- counter-increment 属性
在 HTML 页面中显示计数器是通过如下 2 个函数实现：
counter()函数counters()函数
counter-reset 属性
CSS counter-reset 属性用来将计数器重置为给定的值。该属性的默认值为 none。
- 要重置为计数器的名称。该名称可以是字母（A-Z，a-z）、十进制数字（0-9）、连接符（-）、下划线（_）以及转义字符。
- 要在元素每次出现时将计数器重置为的值。如果没有指定，默认值为 0。
- none：不执行计数器复位。
计数器的个数不一定是一个，也可以是多个。如果 counter-reset 属性的值是多个计数器的话，则计数器之间使用空格分隔。
h1 {
counter-reset: chapter section 1 page;
}
- 将 chapter 和 page 两个计数器复位为 0。
- 将 section 计数器复位为 1。
counter-increment 属性
CSS counter-increment 属性用来设置计数器每次增加的值。该属性的默认值为 none。
- 要增加为计数器的名称。该名称可以是字母（A-Z，a-z）、十进制数字（0-9）、连接符（-）、下划线（_）以及转义字符。
- 要在元素每次出现时将计数器增加为的值。如果没有指定，默认值为 1。
- none：任何计数器都不能递增。
如果 counter-increment 属性设置多个计数器的递增值的话，计数器之间使用空格进行分隔。
h1 {
counter-increment: chapter section 2 page;
}
- 将 chapter 和 page 两个计数器递增为 1。
- 将 section 计数器递增为 2
counter() 函数
CSS counter() 函数用来简单地将计数器的内容显示在 HTML 页面中。counter() 函数返回一个字符串，该字符串表示指定的计数器的当前值。
conter(custom-ident, counter-style)
- custom-ident 参数：表示计数器的名称。
- counter-style 参数：表示显示的样式。
counter() 函数经常与 ::before 和 ::after 伪元素选择器配合使用。
counters() 函数
CSS counters() 函数支持计数器的嵌套情况。counters() 函数返回一个字符串，该字符串表示指定的计数器的当前值。
conter(custom-ident, string, counter-style)
- custom-ident 参数：表示计数器的名称。
- string 参数：表示计数器嵌套的分隔符，可以是任意数量的文本字符。
- counter-style 参数：表示显示的样式。
