3

在我们的项目中，我想以不同的方式设计我们的 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>示例中。

4

2 回答 2

5

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

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

请参阅通用兄弟组合器和否定伪类以及jsbin 上的现场演示。

于 2012-11-13T11:19:11.860 回答
1

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

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

JS 小提琴演示。

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

第二个稍微简单一些：

body {
    padding-left: 1em;
}

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

JS 小提琴演示。

从本质上讲，这种方法确实意味着除h2will 之外的所有内容都会缩进；所以它对于您的用例来说并不是很完美，但可能会适应您的特定要求）。

于 2012-11-13T11:21:10.537 回答