分享一段侧边大纲栏标题自动编号的 CSS（1-4 级）

在 dark+ 主题的基础上，结合自己的使用习惯，给 AI 提要求让它修改 CSS，实现侧边大纲栏标题的自动编号。

为什么是侧边大纲栏标题自动编号？

因为正文存在动态加载的问题，在正文过长，标题数过多的情况下，容易出现加载缓慢，导致标题序号识别错误。我自己写的文档，有的包含几百个二级标题，因此存在正文标题加载序号错误的情况，如果给侧边大纲栏的标题进行编号，则不存在这个问题。

结合个人使用习惯，侧边大纲栏编号规则如下：

一级标题：“一、二、三、、、”

二级标题：“1. ”、“2. ”、“3. ”、、、、

三级标题：“1.1. ”、1.2. ”、“1.3. ”、、、“2.1. ”、、、

四级标题：“1.1.1. ”、“1.1.2. ”、“1.1.3. ”、、“1.2.1. ”、、“2.1.1. ”、“2.1.2. ”、、、

五级、六级标题在大纲栏不进行编号

具体效果如下所示（写味主题）

因为个人使用习惯，更多是直接从二级标题开始，高频使用二、三、四级标题

css 代码如下所示，在“外观——代码片段——设置”添加代码，并打开开关即可

因为是在 dark+ 主题的基础上改的，自己是个编程小白，我也不懂哪些代码是多余的哪些是错误的，试了下 savor 主题可用，不知道其他主题是否存在兼容性问题，还请包涵。

/*-------------------------------大纲中的标题进行自动编号--------------------------------------------*/
/* 一级标题 */
#sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h1"],  /* 手机端 H1 字符 */
.sy__outline ul.b3-list.b3-list--background [data-subtype="h1"]                             /* 电脑端 H1 字符 */
{
counter-increment: h1_n;
counter-reset: h2_n 0;
}
#sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h1"] .b3-list-item__text::before,  /* 电脑端 H1 标题::before */
.sy__outline ul.b3-list.b3-list--background [data-subtype="h1"] .b3-list-item__text::before                             /* 电脑端 H1 标题::before */
{
content: counter(h1_n, cjk-ideographic) "、""\00A0";
}

/* 二级标题 */
#sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h2"],
.sy__outline ul.b3-list.b3-list--background [data-subtype="h2"]
{
counter-increment: h2_n;
counter-reset: h3_n 0;
}
#sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h2"] .b3-list-item__text::before,
.sy__outline ul.b3-list.b3-list--background [data-subtype="h2"] .b3-list-item__text::before
{
content:  counter(h2_n) ". ""\00A0";
}

/* 三级标题 */
#sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h3"],
.sy__outline ul.b3-list.b3-list--background [data-subtype="h3"]
{
counter-increment: h3_n;
counter-reset: h4_n 0;
}
#sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h3"] .b3-list-item__text::before,
.sy__outline ul.b3-list.b3-list--background [data-subtype="h3"] .b3-list-item__text::before
{
content: counter(h2_n) "." counter(h3_n) ". ""\00A0";
}

/* 四级标题 */
#sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h4"],
.sy__outline ul.b3-list.b3-list--background [data-subtype="h4"]
{
counter-increment: h4_n;
counter-reset: h5_n 0;
}
#sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h4"] .b3-list-item__text::before,
.sy__outline ul.b3-list.b3-list--background [data-subtype="h4"] .b3-list-item__text::before
{
content:  counter(h2_n) "." counter(h3_n) "." counter(h4_n) ". ""\00A0";
}

/* 五级标题 */
#sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h5"],
.sy__outline ul.b3-list.b3-list--background [data-subtype="h5"]
{
counter-increment: h5_n;
counter-reset: h6_n 0;
}
#sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h5"] .b3-list-item__text::before,
.sy__outline ul.b3-list.b3-list--background [data-subtype="h5"] .b3-list-item__text::before
{
content:  counter(h2_n) "." counter(h3_n) "." counter(h4_n) "." counter(h5_n) ". ""\00A0";
}

/* 六级标题 */
#sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h6"],
.sy__outline ul.b3-list.b3-list--background [data-subtype="h6"]
{
counter-increment: h6_n;
}
#sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h6"] .b3-list-item__text::before,
.sy__outline ul.b3-list.b3-list--background [data-subtype="h6"] .b3-list-item__text::before
{
content:  counter(h2_n) "." counter(h3_n) "." counter(h4_n) "." counter(h5_n) "." counter(h6_n) ". ""\00A0";
}

/*-----------------------------------编辑页面折叠标题时保留序号---------------------------------*/
.protyle-wysiwyg [fold="1"][data-node-id][data-type="NodeHeading"]::before {
/* 移除子标题折叠原有样式 */
height: unset;
width: unset;
background: unset;
position: unset;
left: unset;
top: unset;
border-radius: unset;
margin-top: unset;
}
​