怎么用css给此插件大纲里的标题自动编号呢?

[exam-ple]

我自己折腾了半天没折腾出来, 麻烦懂得的大佬不吝赐教下, 非常感谢

[UryWu]

在obsidian-quiet-outline目录的styles.css文件里增加以下代码：

/* 设置右边的文章的大纲带h1、h2、h3、h4、h5、h6层级标题 */
.n-tree-node.n-tree-node--selectable.level-1 .n-tree-node-content::before {
  content: "h1\00A0" !important;  /* \00A0就是伪代码content中空格的意思，用&nbsp没用 */
  font-size: 0.8rem;  /* 设置字体大小，1rem和大纲文字同样大小 */
  color: rgb(78, 146, 0);  /* 设置颜色 */
}

.n-tree-node.n-tree-node--selectable.level-2 .n-tree-node-content::before {
  content: "h2\00A0" !important;
  font-size: 0.8rem;
  color: rgb(78, 146, 0);
}

.n-tree-node.n-tree-node--selectable.level-3 .n-tree-node-content::before {
  content: "h3\00A0" !important;
  font-size: 0.8rem;
  color: rgb(78, 146, 0);
}

.n-tree-node.n-tree-node--selectable.level-4 .n-tree-node-content::before {
  content: "h4\00A0" !important;
  font-size: 0.8rem;
  color: rgb(78, 146, 0);
}

.n-tree-node.n-tree-node--selectable.level-5 .n-tree-node-content::before {
  content: "h5\00A0" !important;
  font-size: 0.8rem;
  color: rgb(78, 146, 0);
}

.n-tree-node.n-tree-node--selectable.level-6 .n-tree-node-content::before {
  content: "h6\00A0" !important;
  font-size: 0.8rem;
  color: rgb(78, 146, 0);
}

[exam-ple]

@UryWu 你好, 非常感谢, 终于有人回复了😭 怎么让h1、h2、h3、h4、h5、h6自动累计呢? 我复制你的代码后显示的是:

h1
  h2
    h3
    h3
  h2
    h3
    h3

h1
  h2
    h3
    h3
  h2
    h3
    h3

希望显示的是:

1
  1.1
    1.1.1
    1.1.2
  1.2
    1.2.1
    1.2.2

2
  2.1
    2.1.1
    2.1.2
  2.2
    2.2.1
    2.2.2

[guopenghui]

用CSS counter可以实现：

/* 计数器 */
.n-tree {
    counter-reset: lv1 lv2 lv3 lv4 lv5 lv6;
}
.n-tree-node.level-1 {
    counter-increment: lv1;
    counter-set: lv2;
}
.n-tree-node.level-2 {
    counter-increment: lv2;
    counter-set: lv3;
}
.n-tree-node.level-3 {
    counter-increment: lv3;
    counter-set: lv4;
}
.n-tree-node.level-4 {
    counter-increment: lv4;
    counter-set: lv5;
}
.n-tree-node.level-5 {
    counter-increment: lv5;
    counter-set: lv6;
}
.n-tree-node.level-6 {
    counter-increment: lv6;
}

/*样式*/
.n-tree-node p::before{
    font-weight: bold;
    color: deepskyblue;
}

.n-tree-node.level-1 p::before{
    content: counter(lv1) " ";
}
.n-tree-node.level-2 p::before{
    content: counter(lv1) 
         "." counter(lv2) " ";
}
.n-tree-node.level-3 p::before{
    content: counter(lv1) 
         "." counter(lv2)
         "." counter(lv3) " ";
}
.n-tree-node.level-4 p::before{
    content: counter(lv1)
         "." counter(lv2)
         "." counter(lv3)
         "." counter(lv4) " ";
}
.n-tree-node.level-5 p::before{
    content: counter(lv1)
         "." counter(lv2)
         "." counter(lv3)
         "." counter(lv4)
         "." counter(lv5) " ";
}
.n-tree-node.level-6 p::before{
    content: counter(lv1)
         "." counter(lv2)
         "." counter(lv3) 
         "." counter(lv4)
         "." counter(lv5)
         "." counter(lv6) " ";
}

效果：

[exam-ple]

@guopenghui 真的太感谢了😭 爱死你了😘❤