1

一部のカウンターが機能し、一部のカウンターが機能しない理由を理解できません。次の HTML の目標は、cnt3 スタイルを使用して、後続の <h2> ヘッダーに一致する <h3> を使用して目次リストを作成することです。そして、目次の番号付けを <h2> ヘッダーの番号付けと一致させたいと思います。CSSカウンターを使用してそれを実行しようとしていますが、ほとんどは機能していますが、目次のh3sカウンターがインクリメントされていないか、頻繁にリセットされているようですが、わかりませんなぜ、これをデバッグする方法がわかりません... Mozilla Firebug は、カウンターインクリメントが適切な場所で使用されていることを教えてくれるようですが、番号付けには影響がないようです。明らかに、これは問題を説明するための単純な例であり、はるかに大きなドキュメントで発生しました。

HTML

<h1>H1 Title</h1>
<h2>H2 Title</h2>
<h3 class="cnt3">H3 1</h3>
<h3 class="cnt3">H3 2</h3>
<h3 class="cnt3">H3 3</h3>
<h2 class="cnt">H2 Title 2</h2>
<h3 class="top">H3 4</h3>
<h3 class="top">H3 5</h3>
<h3 class="top">H3 6</h3>
<h2 class="cnt">H2 Title 3</h2>

CSS

h1 {
    counter-reset: h2s;
    text-align: center;
    font-size: 24pt;
}
h2 {
    font-size: 20pt;
    counter-reset: h3s;
    counter-reset: h3t;
}
h3 {
    font-size: 16pt;
    counter-reset: h4t;
}
h2.cnt:before {
    content: 'Section ' counter( h2s, decimal ) ': ';
    counter-increment: h2s;
}
h3.cnt3:before {
    content: 'Section ' counter( h3s, decimal ) ': ';
    counter-increment: h3s;
}
h3.top:before {
    font-size: 16pt;
    content: counter( h2s, decimal ) '.' counter( h3t, decimal ) ': ';
    counter-increment: h3t;
}
h4 { font-size: 13pt; }
h4.top:before {
    font-size: 16pt;
    content: counter( h2s, decimal ) '.' counter( h3t, decimal ) '.' counter( h4t, decimal ) ': ';
    counter-increment: h4t;
}

問題は Firefox と Chrome の両方で発生するため、両方のブラウザーで同じバグではなく、私のコードだと思います!

4

1 に答える 1

4

メソッドを使用する必要があるため、メソッドを使用していません。

カスケード ルールは、このプロパティに対しても実行されます。だからここで....

h2 {
    font-size: 20pt;
    counter-reset: h3s;
    counter-reset: h3t;
    }

プロパティの 2 番目の定義は、前の定義をオーバーライドします。

同じ要素の 2 つのカウンターをリセットするときは、以下に示すように一緒に指定する必要があります。

h2 ルールは次のようになります。

h2 {
    font-size: 20pt;
    counter-reset: h3s h3t;
}

ここでは、JSBinが正常に動作しています。

于 2013-02-23T07:05:29.327 に答える