Счетчик продолжает сбрасываться в 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 просто не держатся, пока "подраздел" не сбрасывается ...

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>