如何用CSS实现h1-h6标题后内容逐层级嵌套缩进，到下一同层级标题截止

问题原因 #

你原来写的CSS有两个核心问题：

1. 通用兄弟选择器~会匹配当前标题之后所有同级元素，无法自动在下一个同层级/更高层级标题出现时重置缩进规则
2. text-indent仅对块元素的第一行文本生效，如果后续内容包含列表、嵌套块等结构，缩进会失效

解决方案 #

方案1：调整HTML嵌套结构（兼容性最好，优先推荐）

大部分Markdown编译工具都支持配置生成带层级的<section>包裹结构，调整后的HTML结构如下：

<section class="level-1">
  <h1>H1</h1>
  <section class="level-2">
    <h2>H2</h2>
    <p>text</p>
  </section>
  <section class="level-2">
    <h2>H2</h2>
  </section>
</section>

对应CSS代码：

/* 每层级缩进16px，按需调整数值即可 */
.level-1 { padding-left: 0; }
.level-2 { padding-left: 16px; }
.level-3 { padding-left: 32px; }
.level-4 { padding-left: 48px; }
.level-5 { padding-left: 64px; }
.level-6 { padding-left: 80px; }

这种方式逻辑清晰，兼容所有浏览器，也不会出现层级匹配错误的问题。

方案2：平级DOM结构用CSS实现（无需改HTML，要求浏览器支持:has()选择器，2023年后发布的主流浏览器均支持）

如果不能调整编译后的HTML结构，可以用以下CSS实现：

/* 先重置所有元素的左内边距 */
* { padding-left: 0; }

/* H2规则 */
h1 ~ h2 { padding-left: 16px; }
h2 ~ *:not(h1):not(h2) { padding-left: 32px; }
h2 ~ h2 { padding-left: 16px; }

/* H3规则，按需继续扩展到H6即可 */
h1 ~ h3, h2 ~ h3 { padding-left: 32px; }
h3 ~ *:not(h1):not(h2):not(h3) { padding-left: 48px; }
h3 ~ h3 { padding-left: 32px; }
h3 ~ h2 { padding-left: 16px; }
h3 ~ h1 { padding-left: 0; }

用你给出的测试HTML结构验证，刚好符合预期：H1无缩进，两个H2均缩进16px，H2下的p段落缩进32px。

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