CSS技巧：利用counter-reset和counter-increment实现标题自动编号

叁歲伎倆 2022-08-30 00:53 150阅读 0赞

本文介绍仅仅使用CSS实现markdown中标题自动编号功能，使用到了CSS中的counter-increment、counter-reset和counter。

## counter-reset ##

counter-reset属性能够创建或重置一个或多个计数器，如：

counter-reset: ticker-name 20;

将会创建一个名为ticker-name的计数器，且设置其初始值为20，如果不设置初始值则默认为0。

## counter-increment ##

counter-increment属性递增一个或多个计数器值，如：

counter-increment: ticker-name 2;

将会将ticker-name计数器的值加2，如果没有设置增加数量则默认每次加1。

## CSS3中的counter ##

counter是CSS3提出的，可以通过：

counter(ticker-name)

得到计数器ticker-name中的数值，通常配合伪元素::after和::before中的content一起使用。

## 测试代码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Document</title>
    
        <style>
            :root {
          
                counter-reset: chapter;
            }
    
            section {
          
                counter-increment: chapter;
                counter-reset: section;
            }
    
            section::after {
          
                content: '';
                display: block;
                border-top: solid 1px #888;
            }
    
            h1::before {
          
                content: '第' counter(chapter) '章 ';
            }
    
            h2 {
          
                counter-increment: section;
                counter-reset: subsection;
            }
    
            h2::before {
          
                content: counter(chapter) '.' counter(section) ' ';
            }
    
            h3 {
          
                counter-increment: subsection;
            }
    
            h3::before {
          
                content: counter(chapter) '.' counter(section) '.' counter(subsection) ' ';
            }
    
    
        </style>
    </head>
    <body>
        <section>
            <h1>CSS小技巧</h1>
            <h2>counter-reset和counter-increment</h2>
            <h3>conunter-reset</h3>
            <p>counter-reset属性创建或重置一个或多个计数器。 其默认值为none（不能对选择器的计数器进行重置）；其属性值有 none  ，id number ，inherit三个属性值。</p>
            <h3>counter-increment</h2>
            <p>这个属性代表递增一个或多个计数器的值；其默认值为none；其属性值有 none  ，id number ，inherit三个属性值。</p>
            <h2>animation</h2>
            <h3>animation-name</h3>
        </section>
        <section>
            <h1>小型项目</h1>
            <h2>项目介绍</h2>
            <h2>项目设计</h3>
        </section>
        <section>
            <h1>总结</h1>
        </section>
    </body>
    </html>

其运行效果如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70]: /images/20220829/cabaa116fb1245eaa7d35ceeef4cd210.png