使用css实现自动计算段落编号

在写文档的时候， 我们通常会把内容分成若干个段落。 每个段落都有一个标题。

而且我们会把段落分成若干个级别， 然后使用h1/h2/h3来做各个级别的标题。

有的时候呢， 为了理清段落之间的关系， 我们会给各个标题前加上编号。

比如：

<h1>1. 编程语言</h1>

<h2>1.1 C++</h2>
<h2>1.2 Python</h2>

手动维护编号实在是一件很闹心的事情， 如果位置靠前的某个段落被删除了， 那么几乎每个段落的编号都要手动修改一下。

我们可以使用js脚本来计算每个段落的编号， 然后自动添加上去。 这样简单的代码，我相信你一定可以写出来。

不过今天我们要讲如何用css来实现这样的功能。

首先，css中的counter-reset可以创建一个计数器。 counter-increment可以将计数器加1。

然后，只需要用counter获取计数器的值， 把它填写在content中就行啦！

直接上代码：

body {
    counter-reset: chapter;
}

h1 {
    counter-reset: section;
}
h1:before {
    counter-increment: chapter;
    content: counter(chapter) ". ";
}

h2 {
    counter-reset: subsection;
}
h2:before {
    counter-increment: section;
    content: counter(chapter) "." counter(section) " ";
}

h3:before {
    counter-increment: subsection;
    content: counter(chapter) "." counter(section) "." counter(subsection) " ";
}

完整代码可以参见demo