在使用CSS堆叠缩进的同时，在h1, h2等之后的所有内容在下一个之前缩进

Question

我有一个markdown文件，我将其编译为HTML文件。然而，当我这样做的时候，我不清楚哪个段落属于哪个标题。我想把后面的内容稍微向右推一下，如果在第一个标题之后有一个副标题，让它向右移动更多。

# H1
## H2
text
## H2

h1 ~ *, h2 ~ *, h3 ~ *, h4 ~ *, h5 ~ *, h6 ~ * {
text-indent: 16px;
}

<h1>H1</h1>
<h2>H2</h2>
<p>text</p>
<h2>H2</h2>

预期输出:

h1 h1>

文本h2

实际输出:

h1 h1>

文本h2

Answer 1

我认为你真正想要的是每个逐渐降低的标题缩进相同的量，段落相对于它们后面的标题缩进。我们将使用后续的兄弟组合子(~)，它只选择选择器之后的兄弟。

为了达到标准的可读性，所有相同级别的标题都应该缩进相同的幅度。在这方面，段落可能不那么重要。我假设您将坚持正确的文档结构，而不是在H1之后立即放置H3，例如。

在这里，我使用自定义属性*定义了一个CSS变量，这样缩进因子可以只在一个地方更新，并为每个规则计算。我选择使用rem单位来实现跨元素类型的大小一致缩放，但您当然可以使用em单位来进行变量缩进，或者简单地使用px。

:root {
--indent-unit: 1rem;
}
h2 {
text-indent: calc(var(--indent-unit) * 1);
}
h2~p,
h3 {
text-indent: calc(var(--indent-unit) * 2);
}
h3~p,
h4 {
text-indent: calc(var(--indent-unit) * 3);
}
h4~p,
h5 {
text-indent: calc(var(--indent-unit) * 4);
}

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<p>Paragraph.</p>
<p>Paragraph.</p>
<h3>Heading Level 3</h3>
<p>Paragraph.</p>
<p>Paragraph.</p>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<p>Paragraph.</p>
<p>Paragraph.</p>

_{*不支持ie浏览器，但我们不在乎。}