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

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

计数器是＆＃34;自我嵌套＆＃34;，在重置计数器的意义上   后代元素或伪元素自动创建一个新元素   柜台的一个例子......

...计数器的范围从文档的第一个元素开始   有一个＆＃39;反复位＆＃39;该计数器包括元素   后代及其后代的兄弟姐妹及其后代。   但是，它不包括计数器范围内的任何元素   使用＆＃39; counter-reset＆＃39;创建的相同名称在后来的兄弟姐妹   该元素或稍后的反击重置＆＃39;在同一个元素上。

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

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

1 个答案: