本文在博客同步发布，您也可以在这里看到最新的文章
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) " "
}
