Question

在我们的项目中，我想以不同的方式设计我们的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>内的每个部分。

Answer 1

听起来你想在第一个h2之后缩进所有兄弟姐妹，除了其他的h2s，在这种情况下，这应该做的工作：

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

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

Answer 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之外的所有内容都将缩进;所以它对你的用例来说并不完美，但可能适合你的特定要求。）

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

2 个答案: