CSS 计数器重置在伪元素中不起作用答案

【问题标题】：CSS counter-reset does not work inside pseudo elementsCSS 计数器重置在伪元素中不起作用
【发布时间】：2015-02-26 14:47:20
【问题描述】：

以下 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 在伪元素中不起作用？

【问题讨论】：

太奇怪了，我一直在搞这个，找不到原因。还简要查看了文档，也看不到任何内容。

标签： html css pseudo-element css-counter

【解决方案1】：

我相信这是一个范围问题。 docs 状态：

计数器是“自嵌套”的，即在后代元素或伪元素自动创建一个新的计数器的实例....

... 计数器的范围从文档中的第一个元素开始具有该计数器的“计数器重置”并包括元素的后代及其后续兄弟姐妹及其后代。但是，它不包括计数器范围内的任何元素同名元素或稍后在同一元素上的“计数器重置”。

我的理解是，当您重置计数器时，会在父元素上创建一个新的计数器实例。如果您在 h1:before 上执行此操作，它将在该单个 <h1> 元素上创建，然后立即关闭...因此您不会在初始计数器上重置。

【讨论】：

正确，我花了一段时间才明白这一点（我也一直在阅读文档）。所以它就像<h1> 是父级并启动一个新计数器而不是重置升级计数器。 +1
是的，它根本没有说得很清楚。只需将这个答案放入该文档中就可以为我们节省大量时间！
公平地说，该规范更多地迎合实施者而不是作者。它根本不是对作者友好的。然而，一些 3 级和 4 级模块设置为改变这一点。
有道理。但是我没有得到“或稍后在同一元素上的'counter-reset'”部分”。您如何“稍后”重置同一元素上的计数器？
我想他们只是说，一旦你在同一个元素上重置了计数器，之前的计数器就不再适用了。所以换句话说，对同一个元素的重置是“超出范围”的第一个计数器。