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

MKr*_*ert 3 html css layout doxygen

在我们的项目中,我想为我们的 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>
Run Code Online (Sandbox Code Playgroud)

<h2>只与一个样式font-size属性,所有<h2><p>标记在文档的左侧对齐。

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

到目前为止,我尝试的是以下 CSS 规则:

h2 + * {
    margin-left: 10px;
}
Run Code Online (Sandbox Code Playgroud)

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

还应该提到的是,html 的结构不能更改为将每个部分包裹在<div>例如a中。

Que*_*tin 5

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

h2 ~ *:not(h2) {
    margin-left: 10px;
}
Run Code Online (Sandbox Code Playgroud)

请参阅通用同级组合器否定伪类以及jsbin 上的现场演示