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