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

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

H2

text

H2

实际输出：

H1

H2

text

H2

Answer 1

我认为您真正想要的是每个逐渐降低的标题缩进相同的数量，并且段落相对于它们后面的任何标题缩进。我们将为此使用 subsequent sibling combinator (~)，就像您所做的那样，它只选择在选择器之后的兄弟姐妹。

为了标准的可读性，同一级别的所有标题都应缩进相同的量。在这方面，段落可能不太重要。例如，我假设您会遵守正确的文档结构，而不是将 H3 紧跟在 H1 之后。

这里我使用 custom property* 定义了一个 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>

_{*Internet Explorer not supported, but we don't care.}

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

Indent everything after h1, h2, etc. before the next, one, while stacking the indents, with CSS

html

css

markdown

H1

H2

H2

H1

H2

H2