HTML 标题编号意外重置

Question

我想要一个简单的 HTML 网页中的标题按层次编号。因此我有:

body {
  counter-reset: h1counter;
}

h1:before {
  content: counter(h1counter) ".\0000a0\0000a0";
  counter-increment: h1counter;
  counter-reset: h2counter;
}

h2:before {
  content: counter(h1counter) "." counter(h2counter) ".\0000a0\0000a0";
  counter-increment: h2counter;
}

<h1>Section 1</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>
<h1>Section 2</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>
<h1>Section 3</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>

但这显示如下:

1.  Section 1
1.1.  Subsection 1
1.1.  Subsection 2
2.  Section 2
2.1.  Subsection 1
2.1.  Subsection 2
Section 3
3.1.  Subsection 1
3.1.  Subsection 2

很明显，第 2 小节 的第二个数字 <h2> headings 应该是 2，但它不会递增(好像 counter-increment: h2counter; 没有被执行)，就像 <h1> 一样。标题。

我错过了什么？

Answer 1

您应该在单个 h1 选择器中移动“h2counter reset”行。样式的最终结果应该是这样的:

body {
    counter-reset: h1counter;
}
h1 {
    counter-reset: h2counter;
}
h1:before {
    content: counter(h1counter) ".\0000a0\0000a0";
    counter-increment: h1counter;
}
h2:before {
    content: counter(h1counter) "." counter(h2counter) ".\0000a0\0000a0";
    counter-increment: h2counter;
}

<h1>Section 1</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>
<h1>Section 2</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>
<h1>Section 3</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>