计数器在 HTML/CSS 中不断重置

Question

我正在尝试写一本电子书，但在管理章节/章节/小节的计数器方面遇到了问题。

body {
  counter-reset: chapter;
  counter-reset: section;
  counter-reset: subsection;
}

h1.chapter::before {
  counter-reset: section;
  counter-reset: subsection;
  counter-increment: chapter;
  content: "Chapter " counter(chapter) ": ";
}

h2.section::before {
  counter-reset: subsection;
  counter-increment: section;
  content: "Section " counter(chapter) "." counter(section) ": ";
}

h3.subsection::before {
  counter-increment: subsection;
  content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
}

<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>

这就是显示的内容：

所以我不知道为什么 chapter 和 section 只是不坚持而 `subsection' 不重置...

Answer 1

您需要从伪元素中移动重置。此外，您可以重新格式化正文上的counter-reset，以将它们全部包含在一个语句中。

body {
  counter-reset: chapter section subsection;
}

h1.chapter::before {
  counter-increment: chapter;
  content: "Chapter " counter(chapter) ": ";
}

h1.chapter {
  counter-reset: section;
}

h2.section::before {
  counter-increment: section;
  content: "Section " counter(chapter) "." counter(section) ": ";
}

h2.section {
  counter-reset: subsection;
}

h3.subsection::before {
  counter-increment: subsection;
  content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
}

<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>

这是一个可以玩的小提琴： https://jsfiddle.net/muc0q9aw/

Answer 2

您必须仅对每个元素使用一次重置，否则您只需将第一个重置为最后一个重置，就像使用任何属性一样。

你还应该注意你需要在哪里使用counter-reset：

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

然后

计数器的范围从文档中的第一个元素开始对该计数器具有“counter-reset”，并包括元素的后代及其后续兄弟及其后代 ^ref

考虑到这一点，您不应重置伪元素内的计数器，而是重置元素本身，以便兄弟元素具有良好的价值。

body {
  counter-reset: chapter section subsection;
}
h1.chapter {
  counter-reset: section subsection;
}
h1.chapter::before {
  counter-increment: chapter;
  content: "Chapter " counter(chapter) ": ";
}

h2.section {
  counter-reset: subsection;
}
h2.section::before {
  counter-increment: section;
  content: "Section " counter(chapter) "." counter(section) ": ";
}

h3.subsection::before {
  counter-increment: subsection;
  content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
}

<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>

你也可以像下面这样简化你的代码：

body {
  counter-reset: chapter; /*we reset the chapter once*/
}
h1.chapter {
  counter-reset: section; /*we reset the section each chapter*/
}
h1.chapter::before {
  counter-increment: chapter;
  content: "Chapter " counter(chapter) ": ";
}

h2.section {
  counter-reset: subsection; /*we reset the subsection each section*/
}
h2.section::before {
  counter-increment: section;
  content: "Section " counter(chapter) "." counter(section) ": ";
}

h3.subsection::before {
  counter-increment: subsection;
  content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
}

<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>