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

Question

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

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:

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 ^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>

Answer 2

您需要从伪元素中移动重置。此外，您可以重新格式化正文中的 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>

这里有一个 fiddle 可以玩： https://jsfiddle.net/muc0q9aw/

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

Counter keeps resetting in HTML/CSS

html

css

css-counter