缩进 h2 之后的所有标签，直到使用 CSS 命中下一个 h2答案

【问题标题】：Indent all tags following h2 until next h2 is hit using CSS缩进 h2 之后的所有标签，直到使用 CSS 命中下一个 h2
【发布时间】：2023-11-02 08:02:01
【问题描述】：

在我们的项目中，我想以不同的方式设置 doxygen 输出的样式。目前生成的 html 如下所示：

<html>
<body>
    <h1> Heading 1 </h1>

    <h2> Heading 2.1 </h2>
    <p> Paragraph 2.1.1 </p>
    <p> Paragraph 2.1.2 </p>
    <p> Paragraph 2.1.3 </p>

    <h2> Heading 2.2 </h2>
    <p> Paragraph 2.2.1 </p>
    <p> Paragraph 2.2.2 </p>
    <p> Paragraph 2.2.3 </p>
</body>
</html>

<h2> 仅使用font-size 属性设置样式，并且所有<h2> 和<p> 标记都在文档的左侧对齐。

为了让任何<h2> 标签下方的内容在视觉上突出我想缩进标签直到下一个<h2> 标签。

到目前为止，我尝试的是以下 CSS 规则：

h2 + * {
    margin-left: 10px;
}

使用* 是因为除了<p> 标签之外还有其他标签。但是，此规则仅缩进 <h2> 标记之后的第一段，而不是所有标记都缩进到下一个 <h2> 标记。

还应该提到的是，不能更改 html 的结构以将每个部分包装在 <div> 中。

【问题讨论】：

标签： html css layout doxygen

【解决方案1】：

听起来你想在第一个 h2 之后缩进除其他 h2 之外的所有兄弟，在这种情况下，这应该可以完成这项工作：

h2 ~ *:not(h2) {
    margin-left: 10px;
}

请参阅 the general sibling combinator 和 the negation pseudo-class 以及 a live demo on jsbin。

【讨论】：

效果很好。也感谢相关文档的链接。

【解决方案2】：

有几个不同复杂度的选项，第一个是：

h2 ~ *:not(h2) {
    margin-left: 1em;
}

JS Fiddle demo.

此方法选择 h2 的所有后续兄弟元素，该元素本身不是 h2。

第二种稍微简单一些：

body {
    padding-left: 1em;
}

body h2 {
    margin-left: -1em;
}

JS Fiddle demo.

这种方法实际上意味着除了h2 之外的所有内容都将缩进；所以它不是很适合您的用例，但可能会适应您的特定要求）。

【讨论】：