html - 使用 CSS Counter 为标题编号

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)

关于如何解决这个问题的任何建议(甚至可能)

附言。可以在此处找到标题示例 http://jsfiddle.net/6xpveu0t/

Answer 1

请以语义正确的方式使用标题。

在早期，人们宁愿滥用不同的标题标签来适应他们的设计，而不是像今天那样正确地设计它们的样式(希望无处不在)。

在标题的语义用法方面，标题1后面总是跟着标题2，接着是标题3。你可以引用w3c school about headline priority .

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

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