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の構造を変更して、各セクションをaの中にラップすることはできないことにも注意してください<div>。

4

2 に答える 2

5

他のh2を除いて、最初のh2の後にすべての兄弟をインデントしたいようです。この場合、これでうまくいくはずです。

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

一般的な兄弟コンビネータと否定疑似クラス、およびjsbinのライブデモを参照してください。

于 2012-11-13T11:19:11.860 に答える
1

複雑さを変えるにはいくつかのオプションがあります。1つ目は次のとおりです。

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

JSフィドルデモ。

h2このアプローチでは、それ自体がではない、のすべての後続の兄弟要素が選択されますh2。

2番目は少し簡単です：

body {
    padding-left: 1em;
}

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

JSフィドルデモ。

このアプローチは、基本的に、を除くすべてのコンテンツh2がインデントされることを意味します。したがって、ユースケースには完全ではありませんが、特定の要件に適応できる可能性があります）。

于 2012-11-13T11:21:10.537 に答える