嵌套标题后续标签缩进问题：重复H1无法重置缩进

你的问题出在通用兄弟选择器~的特性上——它会选中目标元素之后所有同级的匹配元素，哪怕中间出现了更高层级的H1，之前的H2/H3等样式依然会作用在这些后续元素上，导致新的H1及其下属无法重置缩进。

结合你提到的「标题无层级跳跃」的规则（H2必随H1，H3必随H2），可以用现代CSS的:is()和:has()选择器精准控制每个标题段内的元素缩进，实现每个H1实例都从0px重新开始：

/* 先统一重置所有目标元素的基础缩进 */
h1, h2, h3, h4, h5, h6,
p, table, div, img {
  margin-left: 0 !important;
}

/* H1 管辖范围：从当前H1到下一个H1之前的所有内容 */
h1 ~ :is(p, table, div, img):not(:has(~ h1)) {
  margin-left: 0 !important;
}

/* H2 管辖范围：从当前H2到下一个H1/H2之前的所有内容 */
h2 ~ :is(p, table, div, img):not(:has(~ :is(h1, h2))) {
  margin-left: 20px !important;
}

/* H3 管辖范围：从当前H3到下一个H1/H2/H3之前的所有内容 */
h3 ~ :is(p, table, div, img):not(:has(~ :is(h1, h2, h3))) {
  margin-left: 40px !important;
}

h4 ~ :is(p, table, div, img):not(:has(~ :is(h1, h2, h3, h4))) {
  margin-left: 60px !important;
}

h5 ~ :is(p, table, div, img):not(:has(~ :is(h1, h2, h3, h4, h5))) {
  margin-left: 80px !important;
}

h6 ~ :is(p, table, div, img):not(:has(~ :is(h1, h2, h3, h4, h5, h6))) {
  margin-left: 120px !important;
}

原理说明 #

• :is(p, table, div, img) 一次性选中所有需要缩进的标签，简化代码；
• :not(:has(~ :is(h1, h2...))) 是核心：它排除了「后面跟着同层级或更高层级标题」的元素，确保当前标题的样式只作用到下一个同级/上级标题出现前的内容；
• 先统一重置所有元素的缩进，再按层级覆盖，避免旧样式残留。

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