Obsidian中Markdown转PDF的层级标题缩进CSS方案求助

问题分析 #

你当前的CSS方案依赖通用兄弟选择器~，但该选择器会选中目标元素之后所有同层级兄弟元素。当低级标题后出现高级标题时，高级标题仍会被之前的低级标题缩进规则影响，导致缩进错误。

解决方案 #

利用CSS的:has()选择器（Obsidian基于Electron，完全支持），可以精准匹配每个标题之后、直到下一个同级或更高级标题之前的所有内容，实现正确的层级缩进。同时覆盖编辑视图、阅读视图和PDF导出场景：

/* 基础缩进值，可根据需求调整 */
:root {
  --indent-step: 20px;
}

/* 阅读视图 & PDF导出 */
/* h1 及后续内容（直到下一个标题前） */
.el-h1:has(+ *) ~ *:not(:has(.el-h1, .el-h2, .el-h3, .el-h4, .el-h5, .el-h6)) {
  margin-left: 0;
}
.el-h1 {
  margin-left: 0;
}

/* h2 及后续内容 */
.el-h2:has(+ *) ~ *:not(:has(.el-h1, .el-h2, .el-h3, .el-h4, .el-h5, .el-h6)) {
  margin-left: var(--indent-step);
}
.el-h2 {
  margin-left: var(--indent-step);
}

/* h3 及后续内容 */
.el-h3:has(+ *) ~ *:not(:has(.el-h1, .el-h2, .el-h3, .el-h4, .el-h5, .el-h6)) {
  margin-left: calc(var(--indent-step) * 2);
}
.el-h3 {
  margin-left: calc(var(--indent-step) * 2);
}

/* h4 及后续内容 */
.el-h4:has(+ *) ~ *:not(:has(.el-h1, .el-h2, .el-h3, .el-h4, .el-h5, .el-h6)) {
  margin-left: calc(var(--indent-step) * 3);
}
.el-h4 {
  margin-left: calc(var(--indent-step) * 3);
}

/* h5 及后续内容 */
.el-h5:has(+ *) ~ *:not(:has(.el-h1, .el-h2, .el-h3, .el-h4, .el-h5, .el-h6)) {
  margin-left: calc(var(--indent-step) * 4);
}
.el-h5 {
  margin-left: calc(var(--indent-step) * 4);
}

/* h6 及后续内容 */
.el-h6:has(+ *) ~ *:not(:has(.el-h1, .el-h2, .el-h3, .el-h4, .el-h5, .el-h6)) {
  margin-left: calc(var(--indent-step) * 5);
}
.el-h6 {
  margin-left: calc(var(--indent-step) * 5);
}

/* 编辑视图 */
/* h1 行及后续行（直到下一个标题行前） */
.HyperMD-header-1 ~ .cm-line:not(.HyperMD-header-1, .HyperMD-header-2, .HyperMD-header-3, .HyperMD-header-4, .HyperMD-header-5, .HyperMD-header-6) {
  margin-left: 0;
}
.HyperMD-header-1 {
  margin-left: 0;
}

/* h2 行及后续行 */
.HyperMD-header-2 ~ .cm-line:not(.HyperMD-header-1, .HyperMD-header-2, .HyperMD-header-3, .HyperMD-header-4, .HyperMD-header-5, .HyperMD-header-6) {
  margin-left: var(--indent-step);
}
.HyperMD-header-2 {
  margin-left: var(--indent-step);
}

/* h3 行及后续行 */
.HyperMD-header-3 ~ .cm-line:not(.HyperMD-header-1, .HyperMD-header-2, .HyperMD-header-3, .HyperMD-header-4, .HyperMD-header-5, .HyperMD-header-6) {
  margin-left: calc(var(--indent-step) * 2);
}
.HyperMD-header-3 {
  margin-left: calc(var(--indent-step) * 2);
}

/* h4 行及后续行 */
.HyperMD-header-4 ~ .cm-line:not(.HyperMD-header-1, .HyperMD-header-2, .HyperMD-header-3, .HyperMD-header-4, .HyperMD-header-5, .HyperMD-header-6) {
  margin-left: calc(var(--indent-step) * 3);
}
.HyperMD-header-4 {
  margin-left: calc(var(--indent-step) * 3);
}

/* h5 行及后续行 */
.HyperMD-header-5 ~ .cm-line:not(.HyperMD-header-1, .HyperMD-header-2, .HyperMD-header-3, .HyperMD-header-4, .HyperMD-header-5, .HyperMD-header-6) {
  margin-left: calc(var(--indent-step) * 4);
}
.HyperMD-header-5 {
  margin-left: calc(var(--indent-step) * 4);
}

/* h6 行及后续行 */
.HyperMD-header-6 ~ .cm-line:not(.HyperMD-header-1, .HyperMD-header-2, .HyperMD-header-3, .HyperMD-header-4, .HyperMD-header-5, .HyperMD-header-6) {
  margin-left: calc(var(--indent-step) * 5);
}
.HyperMD-header-6 {
  margin-left: calc(var(--indent-step) * 5);
}

方案说明 #

1. :has()选择器的作用：在阅读视图中，el-hx:has(+ *)确保只处理后面有内容的标题，~ *:not(:has(...))则精准排除掉后续出现的任何层级标题，避免缩进规则污染高级标题。
2. 编辑视图兼容：直接通过.HyperMD-header-x类匹配标题行，用:not()排除后续的其他标题行，保证段落行只应用最近标题的缩进规则。
3. 可自定义缩进：通过--indent-step变量统一调整缩进幅度，修改一次即可生效所有层级。
4. PDF导出支持：Obsidian导出PDF时使用阅读视图的渲染逻辑，因此阅读视图的样式会直接应用到PDF中。

测试验证 #

按你的示例结构测试：

h1 Heading
paragraph
  h2 Heading
  paragraph
  paragraph
      h4 Heading
      paragraph
    h3 Heading
    paragraph

以及错误场景：

h1
  h2
    h3
    h2 <- 现在会正确回到h2的缩进级别

内容的提问来源于stack exchange，提问作者WEelCh