Html 使用CSS缩进h2后面的所有标记，直到命中下一个h2为止_Html_Css_Layout_Doxygen

Html 使用CSS缩进h2后面的所有标记，直到命中下一个h2为止

html css layout doxygen

Html 使用CSS缩进h2后面的所有标记，直到命中下一个h2为止,html,css,layout,doxygen,Html,Css,Layout,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

在我们的项目中，我想以不同的方式设计我们的强氧输出。当前生成的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>

之所以使用

，是因为除了

标记之外，还有其他标记。但是，此规则仅缩进

标记后面的第一段，而不是将所有标记缩进下一个

标记

还应该提到的是，html的结构不能更改为将每个部分包装在

中。例如，

听起来像是要将第一个h2之后的所有同级缩进，但其他h2除外，在这种情况下，这应该可以完成以下工作：

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

请参见和。

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

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

此方法选择本身不是

h2

的

h2

的以下所有同级元素

第二个稍微简单一些：

body {
    padding-left: 1em;
}

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

这种方法本质上意味着除了

h2

之外的所有内容都将缩进；因此，它不太适合您的用例，但可能适合您的特定需求）。

效果很好。同时感谢您提供相关文档的链接。

body {
    padding-left: 1em;
}

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