Html 如何使用CSS创建标题编号

我正在使用这个非常公式化的CSS来尝试向HTML5文档添加标题编号。可悲的是，它正在产生一种不理想的输出。我怎样才能让它实现我的意思

$> CSS
h1 { counter-reset: c2; font-size: 2.0em; }
h2 { counter-reset: c3; font-size: 1.8em; }
h3 { counter-reset: c4; font-size: 1.6em; }
h4 { counter-reset: c5; font-size: 1.4em; }
h5 { counter-reset: c6; font-size: 1.2em; }
h6 { counter-reset: c7; font-size: 1.0em; }
h7 { counter-reset: c8; font-size: 0.9em; }
h8 { counter-reset: c9; font-size: 0.8em; }
h9 {                    font-size: 0.7em; }

h1:before {counter-increment: c1; content: counter(c1) ".\0000a0\0000a0"}
h2:before {counter-increment: c2; content: counter(c1) "." counter(c2) ".\0000a0\0000a0"}
h3:before {counter-increment: c3; content: counter(c1) "." counter(c2) "." counter(c3) ".\0000a0\0000a0"}
h4:before {counter-increment: c4; content: counter(c1) "." counter(c2) "." counter(c3) "." counter(c4) ".\0000a0\0000a0"}
h5:before {counter-increment: c5; content: counter(c1) "." counter(c2) "." counter(c3) "." counter(c4) "." counter(c5) ".\0000a0\0000a0"}
h6:before {counter-increment: c6; content: counter(c1) "." counter(c2) "." counter(c3) "." counter(c4) "." counter(c5) "." counter(c6) ".\0000a0\0000a0"}
h7:before {counter-increment: c7; content: counter(c1) "." counter(c2) "." counter(c3) "." counter(c4) "." counter(c5) "." counter(c6) "." counter(c7) ".\0000a0\0000a0"}
h8:before {counter-increment: c8; content: counter(c1) "." counter(c2) "." counter(c3) "." counter(c4) "." counter(c5) "." counter(c6) "." counter(c7) "." counter(c8) ".\0000a0\0000a0"}
h9:before {counter-increment: c9; content: counter(c1) "." counter(c2) "." counter(c3) "." counter(c4) "." counter(c5) "." counter(c6) "." counter(c7) "." counter(c8) "." counter(c9) ".\0000a0\0000a0"}

输出如下所示：

1.正文 1.正文 0.1文本 0.2文本 0.2.1文本

---

等等。为什么计数器（c1）重置回0而不递增？

添加以下样式规则将解决您的问题（请参阅）：

---

根据报告：

要使用CSS计数器，必须首先将其重置为默认值0

中的相关部分解释了计数器重置为零的原因。对

内容：计数器（c1）

的调用不在对

计数器重置：c1

的任何调用的范围内。根据规范：

如果元素或伪元素上的“计数器增量”或“内容” 指不在任何“计数器重置”范围内的计数器， 实现应该表现为“计数器重置”已重置 该元素或伪元素上0的计数器

---

尝试初始化

c1

，如

body{counter reset:c1；}

@torazaburo:That起作用。将下面的答案标记为正确。

body { counter-reset: c1; }