奇妙的CSS计数器世界主要分为三个部分，在第一部分中介绍了 list-style 的基本使用之外，主要是向大家阐述了如何使用 @counter-style 实现自定义的列表项标记符（list-style-type）；在第二部分中介绍列表标记框，即伪元素 ::marker的使用以及可用于::marker上的CSS属性。至此，我们可以在::marker、::before和::after三个伪元素上的content生成内容，来构建更具个性化的列表项标记符。虽然如此，要实现具有计数（或者说编号）的列表项符号样式，还是需要CSS的计数器来助力，即counter-reset、counter-increment和counter()及counters()函数。在接下来的内容，主要围绕着这几个属性展开。感兴趣的请继续往下阅读。

使用计数器自动编号

我们都知道，有序列表<ol>的每个列表项都是有编号的，比如：

<!-- HTML -->
<ol>
    <li class="list-item">Ordered list item</li>
    <li class="list-item">Ordered list item</li>
    <li class="list-item">Ordered list item</li>
    <li class="list-item">Ordered list item</li>
</ol>

这是通过CSS计数器的方式实现的。

CSS 计数器是一种特殊的数字跟踪器，主要用于对 CSS 中的列玥项进行自动编号。每个元素都有一个零个或多个计数器的集合，它们通过文档树以类似继承属性值的方式被继承下来。比如：

<!-- HTML -->
<ol>
    <li class="list-item">Ordered list item</li>
    <li class="list-item">
        Ordered list item
        <ol>
            <li class="list-item">
                Ordered list item
                <ol>
                    <li class="list-item">Ordered list item</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

CSS 中的每个计数器都有一个名称和创建者，用来识别计数器，还有一个整数值。可以通过计数器属性counter-increment、counter-set 和 counter-reset来创建计数器，也可以通过counter()和counters()函数来调用已创建的计数器。

CSS中解决一个给定元素上的计数器值是一个多步骤的过程：

• ①：现有的计数器是从以前的元素中继承的，即 使用隐式的计数器list-item
• ②：新的计数器被实例化（counter-reset），即 使用 counter-reset 声明一个计数器名称（<counter-name>）
• ③：计数器的值被递增（counter-increment），即 使用counter-increment 指定计数器（<counter-name>）值是被递增的
• ④：计数器的值被明确地设置（counter-set），即 使用counter-set指定计数器的值是一个确切的值
• ⑤：使用计数器的值（counter() 或 counters），即使用counter()或counters()函数调用counter-reset已创建的计数器（<counter-name>）

注意，UA（客户端）可能对计数器的最大或最小值有一定的限制。如果一个计数器重置、设置或增量会将值推到该范围之外，那么该值必须在该范围内。

正如前面示例所示，自己创建的CSS计数器，需要结合::marker或::before和::after的content一起使用。另外，在CSS中的计数器又分为 隐式计数器 和 显式计数器（即自定义计数器）两种。我们先来看第一种。

隐式计数器

CSS的列表项li的display值为list-item，除此之外，还可以给元素（非li元素）设置display的值为list-item。此时，这些元素（即li元素和显式设置了display为list-item的元素）会自动创建一个名为list-item的计数器（<counter-name>的名称为list-item），它在生成列表项的默认标记字符串时使用（list-style-type）。

• ul 的 list-style-type 的值是 disc
• ol 的 list-style-type 的值是 decimal
• display为list-item的元素的list-style-type的值和ul的list-style-type值相同，即disc

但只有ol有编号的效果。不过，我们可以使用counter()函数引用list-item计数器名称（隐式计数器）对非ol的列表也有编号的效果，但要结合::marker或::before或::after的content一起使用。

CSS的content(生成内容)属性可以使用<counter>，也就是counter()或counters()函数，使用计数器。

来看一个简单地示例，比如说我们想构建一个有编号的步骤列表，比如“Step1”、“Step2”、“...”至“StepN”（N是一个数值），我们可以像下面这样来使用：

li::marker {
    content: "Step" counter(list-item) ":";
}

如上图所示，所有的li的编号都是以字符Step开头加上列表项的编号，即使是嵌套的列表项也是如此。但如果你对嵌套列表，在编号上有所差异，比如：

• 一级列表项的编号为整数，比如Step1、Step2、依此类推
• 二级列表项的编号在一级列表项整数编号基础上追加.符号，然后紧跟是整数，比如Step1.1、Step1.2、依此类推
• 三级列表项的编号在二级列表项基础上继续扩展，比如Step1.1.1、Step1.1.2、依此类推
• 四级、五级到N级列表项的编号按上面的方式类推

对于这样的效果，可以通过counters()函数来实现：

li::marker {
    content: "Step" counters(list-item, ".") ": ";
}

因为每个列表项都会自动将list-item的计数器增加1，所以具有数字列表样式类型（list-style-type）的连续列表项默认会连续编号，即使将counter-increment设置为其他值，比如，counter-increment: itemnumber 或者 none：

li {
    counter-increment: itemnumber; /* 或 none */
}

ol:nth-child(1) li::marker {
    content: "Step" counter(list-item) ":";
}

ol:nth-child(2) li::marker {
    content: "Step" counters(list-item, ".") ":";
}

这样可以保护list-item计数器（隐式计数器）不被旨在处理其他计数器的声明无意覆盖。然而，如果列表项的 counter-increment 明确提到了 list-item 计数器，并指定了一个整数值，比如：

li {
    counter-increment: list-item 2;
}

列表项的起始值就是2了，并列表项编号以2递增：

而且我们可以像下面这样使用来关闭列表项的自动增量：

li {
    counter-increment: list-item 0;
}

counter-increment指定list-items计数器的递增量还可以是负值，比如-1，那么列表项起始编号为-1，并且以-1往后递减：

li {
    counter-increment: list-item -1;
}

显式计数器

显式计数器也被称为自定义计数器，即使用：

• counter-reset显式创建一个计数器名称<counter-name>，
• counter-increment指定计数器递增值或counter-set指定计数器确切值
• counter()或counters()函数引用已定义的计数器<counter-name>

他对应的HTML结构如下：

<counter-reset>
    <counter-increment>
        counter-increment::marker || counter-increment::before || counter-increment::after
    </counter-increment>
</counter-reset>

我们来看一个简单地示例：

<ol><!-- counter-reset -->
    <li class="list-item">Ordered list item</li> <!-- counter-increment -->
    <li class="list-item">
        Ordered list item
        <ol> <!-- counter-reset -->
            <li class="list-item"> <!--