typroa自定义css样式实现标题自动排序
问题痛点
用Typora写长文档时，最烦的就是标题排序——每次插入或删除一个标题，后面的序号都要手动改一遍，上次写文章时改到头晕。
后来研究了CSS自定义样式，终于实现了标题自动排序，不管怎么调整结构，序号都能自动刷新。
这篇就把从基础实现到样式优化的全流程分享出来。适用以下困扰场景：
✅ 手动添加「1.1、1.2.3」编号效率低下？
✅ 调整章节顺序导致编号错乱？
✅ 无法实现「第一章、第一节」中文编号？
本文将用自定义CSS代码彻底解决这些问题！
基础版：自动生成多级数字编号
（一）找到Typora的自定义CSS文件
首先要找到Typora的主题样式目录，不同系统路径不一样，这里分两种情况：
- Windows系统：打开Typora，点击“文件→偏好设置→外观→主题→打开主题文件夹”，会弹出一个存放主题CSS的文件夹；
- Mac系统：打开Typora，点击“Typora→设置→外观→主题→打开主题文件夹”，同样会弹出主题目录
打开typora-设置-外观-找到主题文件夹
（二）、创建自定义CSS文件
在Typora主题目录（打开typora-设置-外观-找到主题文件夹）新建 auto-number.css，添加以下代码：
/** initialize css counter */
#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(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;
}添加完成后，保存CSS文件，然后重启Typora（必须重启才能生效）。
此时新建文档输入h1到h4标题，就能看到自动生成的序号了，插入或删除标题时，序号会自动更新。
新建一个 markdown 文档试验一下，只需要填写章节名，就会自动在章节名前添加序号
进阶配置：满足特殊需求
如果你有特殊的编号需求，比如序号要是中文的，第一节…..之类
h1::before {
content: "第" counter(h1, cjk-ideographic) "章 ";
}
h2::before {
content: "第" counter(h2, cjk-ideographic) "节 ";
}只需要修改 h:before{} 渲染的样式即可
可以根据自己的喜好调整颜色、padding、边框等参数，比如一级标题用深色背景，二级用浅色，区分更明显。
常见问题
Q1. 样式不生效，标题没有序号？
最常见的原因有三个：
-
没重启 Typora：CSS 修改后必须重启才能生效，这点一定要记住；
-
改错了主题文件：确认修改的是当前使用的主题 CSS，比如用的是“Vue”主题，却改了“Github”的 CSS；
-
CSS 代码有语法错误：比如少写了大括号或分号，建议用在线 CSS 验证工具检查语法。
Q2. 序号和标题文字重叠了？
这是因为标题的 padding-left 值太小，预留的序号位置不够。
解决：在 CSS 里找到对应标题（比如 h1、h2）的 padding-left 属性，适当增大数值，比如把 h1 的改成 50px。
Q3. 导出 PDF/HTML 后序号消失了？
这是 Typora 导出的默认设置问题，
解决：导出时勾选「包含 CSS」选项。具体步骤：「文件」→「导出」→ 选择 PDF 或 HTML → 点击「导出设置」→ 勾选「包含主题 CSS」，再导出就能保留序号了。
Q4. 部分标题不想显示序号，怎么隐藏？
可以给不需要序号的标题加自定义类。比如想隐藏某个一级标题：
-
在 Markdown 里写：
<h1 class="no-number">不需要序号的标题</h1>； -
在 CSS 里添加：
/* 隐藏指定类的标题序号 */h1.no-number::before {content: ""; /* 清空序号内容 */padding: 0; /* 取消预留位置 */}
Q5. 第三方主题适配问题，序号样式混乱？
有些第三方主题本身给标题加了复杂样式，会和我们的排序 CSS 冲突。
解决：给我们写的 CSS 选择器加优先级，比如在选择器前加 body ，变成 body h1::before，提高样式优先级，覆盖主题默认样式。
总结
用 CSS 实现 Typora 标题自动排序，本质上是利用了 CSS 计数器的特性，不用装任何插件，轻量又稳定。
除了文中的格式，还可以自定义序号颜色（加 color: #1890ff;）、字号等，根据自己的文档风格调整。
如果还有其他适配问题，欢迎在评论区交流~
版权声明
未经授权，禁止转载本文章。
如需转载请保留原文链接并注明出处。即视为默认获得授权。
未保留原文链接未注明出处或删除链接将视为侵权，必追究法律责任！