CSS counter-reset在伪元素中不起作用

Question

以下CSS计数器示例无法按预期工作.子标题的计数器应在每个主标题后重置:

body {
  font: smaller sans-serif;
  counter-reset: h1 h2;
}
h1:before {
  counter-reset: h2;
  content: counter(h1) ". ";
  counter-increment: h1;
}
h2:before {
  content: counter(h1) "." counter(h2) ". ";
  counter-increment: h2;
}

<h1>Heading</h1>
<h2>Sub-heading</h2>
<h2>Sub-heading</h2>
<h1>Heading</h1>
<h2>Sub-heading</h2>
<h2>Sub-heading</h2>

但是,以下工作符合预期:

body {
  font: smaller sans-serif;
  counter-reset: h1 h2;
}
h1:before {
  content: counter(h1) ". ";
  counter-increment: h1;
}
h1 {
  counter-reset: h2;
}
h2:before {
  content: counter(h1) "." counter(h2) ". ";
  counter-increment: h2;
}

<h1>Heading</h1>
<h2>Sub-heading</h2>
<h2>Sub-heading</h2>
<h1>Heading</h1>
<h2>Sub-heading</h2>
<h2>Sub-heading</h2>

我的问题是,为什么counter-reset不在伪元素内部工作？

Answer 1

我相信这是一个范围问题.该文档的状态:

计数器是"自嵌套"的,因为重置后代元素或伪元素中的计数器会自动创建计数器的新实例....

...计数器的范围从文档中的第一个元素开始,该元素具有该计数器的"反复位",并包含元素的后代及其后代兄弟及其后代.但是,它不包括计数器范围内的任何元素,这些元素具有相同的名称,该元素由元素的后一个兄弟节点上的'counter-reset'创建,或者在同一元素上由稍后的'counter-reset'创建.

我理解这一点的方法是,当你重置计数器时,会在父元素上创建一个新的计数器实例.如果你这样做h1:before就会在那个单独的<h1>元素上创建,然后立即关闭...因此你不会在初始计数器上重置.