11

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

4

1 回答 1

11

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

计数器是“自嵌套”的，从某种意义上说，在后代元素或伪元素中重置计数器会自动创建计数器的新实例......

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

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

于 2015-02-26T15:50:17.283 回答