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

Question

以下 CSS 反例未按预期工作。 sub-headings 的计数器应在每个主标题后重置：

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

我认为这是一个范围问题。 docs 状态：

Counters are "self-nesting", in the sense that resetting a counter in a descendant element or pseudo-element automatically creates a new instance of the counter....

... The scope of a counter starts at the first element in the document that has a 'counter-reset' for that counter and includes the element's descendants and its following siblings with their descendants. However, it does not include any elements in the scope of a counter with the same name created by a 'counter-reset' on a later sibling of the element or by a later 'counter-reset' on the same element.

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

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

CSS counter-reset does not work inside pseudo elements

html

css

pseudo-element

css-counter