html - 見出しの CSS カウンターによる番号付け

Question

ヘッダーの CSS カウントを実現しようとしています。例のために。

<h1>first heading</h1>
<h2>second heading</h2>

変換されます

1. first heading
1.1 second heading

それはcssカウンターでうまく機能します。機能しないのは、h2 が h3 の場合です。その結果、h3 見出しは 1.1.1 ではなく「1.0.1」を追加します。これは、h2 見出しがないため、h2 のカウンターが 0 であるためです。

<h1>first heading</h1>
<h3>third heading (should be 1.1.1)</h3>

変換されます

1. first heading
1.0.1 third heading (should be 1.1.1)

これを解決する方法についての提案（それは可能ですか）

ps。見出しの例は、http://jsfiddle.net/6xpveu0t/にあります。

Answer 1

意味的に正しい方法で見出しを使用してください。

以前は、今日のように適切にスタイリングするのではなく、デザインに合わせてさまざまな見出しタグを悪用していました (できればどこでも)。

見出し のセマンティックな使用法に関しては、見出し 1 の後には常に見出し 2 が続き、その後に見出し 3 が続きます。見出しの優先度については w3c schoolを参照してください。

印刷された本では、スキップされた章の中に入れ子になったサブチャプターはありません。したがって、CSS カウンターは正しいです。

それでも、空の を含めることができます<h2></h2>。