标题用 CSS 计数器编号

Question

我正在尝试实现标题的 css 计数。 例如。

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

将被转换

1. first heading
1.1 second heading

这适用于 css 计数器。当 h2 是 h3 时不起作用。结果将是 h3 标题将添加“1.0.1”而不是 1.1.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 about headline priority。

在印刷书籍中，您永远不会在 跳过 章节中找到嵌套的子章节。因此 CSS 计数器是正确的。

不过，您可以包含一个空的<h2></h2>。