本文在博客同步发布，您也可以在这里看到最新的文章
Markdown编辑器大多不会提供分级标题的自动编号功能，但我们可以通过简单的css样式设置实现。
本文介绍了使用css实现各级标题自动编号的方法，本方法同样适用于typora编辑器和wordpress主题。
1 实现效果
本文将实现以下效果：
相应html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现各级标题自动编号</title>
</head>
<body>
<div id='write'>
<h1>实现效果</h1>
<h1>实现思路</h1>
<h1>应用实例</h1>
<h2>Typora</h2>
<h2>WordPress Sakurairo主题</h2>
</div>
<p><b>注意:</b> IE8 需要指定 !DOCTYPE 才可以支持该属性。</p>
</body>
</html>
2 实现思路
2.1 步骤一：编写标题内容
使用h1~h6区域标题标签设置标题内容，标签的具体用法可以参考这篇文档。
本文的示例仅用到前两级标题。
出于设置方便考虑，建议您将含标题在内的文本区域放在一个<div>标签中，就如示例这样做。
2.2 步骤二：设置编号
分为以下三个步骤：
- 定义并初始化序号变量
- 设置序号增量
- 调用序号变量
2.2.1 定义并初始化序号
使用counter-reset属性进行初始化，具体的用法可以参考这篇文档。
1、一级标题
在上一层标签的样式表中初始化。在本例中，在#write的css中初始化。
2、二级即下层标题
在上一级标题的样式表中初始化。
#write {
counter-reset: h1
}
h1 {
counter-reset: h2
}
在代码中，counter-reset属性做了两件事：首先，定义了序号变量h1、h2（变量名随您喜好，也可以叫别的）；其次，给序号变量设置了一个初始值，默认为1，也可以显式地初始化为其它值，例如下面的代码将序号变量初始化为了5：
h1{
counter-reset:h2 5;
}
2.2.2 设置序号增量
counter-increment属性可以使标题编号增加或减少，具体的用法可参考这篇文档。
#write h1{
counter-increment: h1;
}
#write h2{
counter-increment: h2;
}
以上代码可以使2.2.1中声明的变量自增1。
2.2.3 调用序号变量
使用伪类::before可以对元素的第一个子元素进行设置，结合content属性，可以为第一个子元素添加修饰性的内容。
#write h1::before{
counter-increment: h1;
content: counter(h1) " ";
}
#write h2::before {
counter-increment: h2;
content: counter(h1) "." counter(h2) " ";
}
上述代码在2.2.2的基础上添加了::before和counter属性。
在counter属性中，我们通过counter()函数取到相应变量的值，并通过字符串设置连接各级序号的分隔符。
设置好编号格式后，再通过::before伪类将content属性的内容设置为在标题标签之前显示。
这样，就大功告成了。
3 完整代码
完整的h5代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现各级标题自动编号</title>
</head>
<style>
#write {
counter-reset: h1;
}
#write h1{
counter-reset: h2;
}
#write h1::before{
counter-increment: h1;
content: counter(h1) " ";
}
#write h2::before {
counter-increment: h2;
content: counter(h1) "." counter(h2) " ";
}
</style>
<body>
<div id='write'>
<h1>实现效果</h1>
<h1>实现思路</h1>
<h1>应用实例</h1>
<h2>Typora</h2>
<h2>WordPress Sakurairo主题</h2>
</div>
<p><b>注意:</b> IE8 需要指定 !DOCTYPE 才可以支持该属性。</p>
</body>
</html>
上述代码可以在菜鸟教程在线编辑器 (runoob.com)在线测试，验证本文示例的效果。
4 应用实例
4.1 Typora
代码添加位置：主题目录下的base.user.css文件。
#write {
counter-reset: h1
}
h1 {
counter-reset: h2
}
h2 {
counter-reset: h3
}
h3 {
counter-reset: h4
}
h4 {
counter-reset: h5
}
h5 {
counter-reset: h6
}
/** put counter result into headings */
#write h1:before {
counter-increment: h1;
content: counter(h1) " "
}
#write h2:before {
counter-increment: h2;
content: counter(h1) "." counter(h2) " "
}
#write h3:before,
h3.md-focus.md-heading:before /** override the default style for focused headings */ {
counter-increment: h3;
content: counter(h1) "." counter(h2) "." counter(h3) " "
}
#write h4:before,
h4.md-focus.md-heading:before {
counter-increment: h4;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) " "
}
#write h5:before,
h5.md-focus.md-heading:before {
counter-increment: h5;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " "
}
#write h6:before,
h6.md-focus.md-heading:before {
counter-increment: h6;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}
/** override the default style for focused headings */
#write>h3.md-focus:before,
#write>h4.md-focus:before,
#write>h5.md-focus:before,
#write>h6.md-focus:before,
h3.md-focus:before,
h4.md-focus:before,
h5.md-focus:before,
h6.md-focus:before {
color: inherit;
border: inherit;
border-radius: inherit;
position: inherit;
left:initial;
float: none;
top:initial;
font-size: inherit;
padding-left: inherit;
padding-right: inherit;
vertical-align: inherit;
font-weight: inherit;
line-height: inherit;
}
官方文档：Auto Numbering for Headings - Typora Support
4.2 WordPress Sakurairo主题
代码添加位置：css/theme/sakura.css，可以在“后台-外观-主题文件编辑器”或登录服务器进行修改。
/* 文章标题自动编号 */
.post .entry-content{
counter-reset: h1Counter;
}
.post .entry-content h1{
counter-reset: h2Counter;
}
.post .entry-content h2{
counter-reset: h3Counter;
}
.post .entry-content h3{
counter-reset: h4Counter;
}
.post .entry-content h4{
counter-reset: h5Counter;
}
.post .entry-content h1:before{
counter-increment: h1Counter;
content: counter(h1Counter) " "
}
.post .entry-content h2:before{
counter-increment: h2Counter;
content: counter(h1Counter) "." counter(h2Counter) " "
}
.post .entry-content h3:before{
counter-increment: h3Counter;
content: counter(h1Counter) "." counter(h2Counter)"." counter(h3Counter) " "
}
.post .entry-content h4:before{
counter-increment: h4Counter;
content: counter(h1Counter) "." counter(h2Counter) "." counter(h3Counter) "." counter(h4Counter) " "
}
.post .entry-content h5:before{
counter-increment: h5Counter;
content: counter(h1Counter) "." counter(h2Counter) "." counter(h3Counter) "." counter(h4Counter) "." counter(h5Counter) " "
}
