计数器不断在HTML/CSS中重置 [英] Counter keeps resetting in HTML/CSS

问题描述

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

I am trying to write an electronic book, and I'm having problems with counters for managing 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'不重置的情况下不粘住...

So I have no idea why the chapter and section just don't stick while `subsection' doesn't reset...

推荐答案

您需要将重置从伪元素中移出.另外，您可以在主体上重新设置counter-reset的格式，以将它们全部包含在一个语句中.

You need to move the reset from the pseudo element. Also, you can reformat the counter-reset on the body to include all of them in one statement.

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/

Here is a fiddle to play with: https://jsfiddle.net/muc0q9aw/

这篇关于计数器不断在HTML/CSS中重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！