CSS计数器（counter）

点击打开在线编译器，边学边练

CSS 里面的伪元素其实是非常好用的，但是经常容易被大家忽略，伪元素里面常用到的 content 属性，可能现在很多人仅仅以为 content 属性的值只支持字符串，除了字符串外常用到的还有 uri、counter ，今天所要介绍的就是 conter(计数器)。

CSS 中的计数器类似于变量，可以实现简单的计数功能，并将结果显示在页面上，在早期的网站上应用比较广泛。要实现计数器需要用到以下几个属性：

属性	详细
counter-reset	创建或者重置计数器；
counter-increment	递增变量
content	插入生成的内容
counter() 或 counters()	将计数器的值添加到元素。

下面我们就来看一下 CSS 中的计数器是如何使用的。

1. 使用计数器自动编号

CSS计数器根据规则来递增变量。

CSS计数器使用到以下几个属性：

（1）counter-reset:name1 name2 创建或者重置计数器（可以同时定义多个计数器，中间用空格隔开）

（2）counter-increment:name step 递增变量（可以递增一个或者多个）

（3）content:counter(name) 插入生成的内容（使用伪元素before/after）

（4）counter()或counters()函数将计数器值添加到元素

创建计数器时，必须在该标签的前一个标签或者是父标签里创建，如果定义在自己标签内是无效的。

具体应用：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Dotcpp编程</title>
    <style>
        div{
            counter-reset: counter1;
        }
        h2{
            counter-reset: counter2;
        }
        h2::before{
            /* 先设置步长 */
            counter-increment: counter1 1;
            content: '第' counter(counter1) '篇';
        }
        p::before{
             /* 先设置步长 */
             counter-increment: counter2 1;
            content: '第' counter(counter1) '段';
        }
    </style>
</head>
<body>
    <div>
        <h2></h2>
        <p></p>
        <p></p>
        <p></p>
        <h2></h2>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>
</html>

运行结果：

使用计数器自动编号

2. 初始化计数器

要使用计数器首先需要使用 counter-reset 属性来创建一个计数器，这一过程便叫做初始化计数器。counter-reset 属性的语法格式如下：

counter-reset：none | [<identifier> <integer>]

参数说明如下：

（1）none：阻止计数器复位；

（2）<identifier>：定义计数器的名称；

（3）<integer>：定义计数器的起始值，默认值为 0，可以为负值。

3. 计数器自增

初始化计数器后，可以通过 counter-increment 属性来指定计数器何时自增，语法格式如下：

counter-increment：none | [<identifier> <integer>]

参数说明如下：

（1）none：阻止计数器增加；

（2）<identifier>：定义要自增的计数器名称；

（3）<integer>：定义计数器每次增加的数值，默认值为 1，可以为负值。

4. 显示计数器

最后，就是如何显示计数器了。要显示计数器您可以使用 counter() 或 counters() 函数，这两个函数的语法格式如下：

counter(name)
counters(name, string, list-style-type)

参数说明如下：

（1）name：计数器的名称；

（2）string：当计数器嵌套使用时，用来拼接的字符串；

（3）list-style-type：计数器显示的风格，可以是 CSS 中允许的任何《list-style-type 属性》的值。

下面通过一个简单的示例来演示计数器的使用：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            counter-reset: chapter; 
        }
        h5, h6 {
            margin: 5px 0 5px;
        }
        h5 {
            counter-reset: section;
            counter-increment: chapter;
        }
        h6 {
            counter-increment: section;
        }
        h5:before {
            content: "Chapter " counter(chapter) ". ";
        }
        h6:before {
            content: counter(chapter) "." counter(section) " ";
        }
    </style>
</head>
<body>
    <h5>第一章</h5>
    <h6>第一节</h6>
    <h6>第二节</h6>
    <h6>第三节</h6>
    <h6>第四节</h6>

    <h5>第二章</h5>
    <h6>第一节</h6>
    <h6>第二节</h6>
    <h6>第三节</h6>
    <h6>第四节</h6>
</body>
</html>

运行结果：

显示计数器

5. 计数器嵌套

另外，计数器还可以嵌套使用，而且使用 counters() 函数可以在不同级别的嵌套计数器之间插入一个字符串，如下例所示：

<!DOCTYPE html>
<html>
<head>
    <style>
        ol {
            /* 为每个ol元素创建新的计数器实例 */
            counter-reset: ol-list;
            list-style-type: none;
        }
        li:before {
            /* 只增加计数器的当前实例 */
            counter-increment: ol-list;
            /* 为所有计数器实例增加以“.”分隔的值 */
            content: counters(ol-list, ".") "、";
        }
    </style>
</head>
<body>
    <ol>
        <li>卷</li>
        <li>章
            <ol>
                <li>节</li>
                <li>节</li>
                <li>节
                    <ol>
                        <li>小节</li>
                        <li>小节</li>
                    </ol>
                </li>
                <li>节
                    <ol>
                        <li>小节</li>
                        <li>小节</li>
                        <li>小节</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>章</li>
        <li>章</li>
    </ol>
</body>
</html>

运行结果：

计数器嵌套