Как остановить теги <div>, мешающие счетчикам?

Ответ 1

Причину поведения можно объяснить подробно, взглянув на то, что спецификации W3C говорят о создании счетчиков, их объеме и наследование.

Счетчик Reset: Свойство counter- reset создает новые счетчики для элемента.

Сфера действия счетчика: Область действия счетчика начинается с первого элемента документа, который имеет счетчик reset для этого счетчика.

Наследование счетчика: Счетчик и его значение наследуются отдельно, возможно, из разных элементов. Если элемент имеет предыдущего брата, он должен наследовать все счетчики брата и сестры. В противном случае, если элемент имеет родительский элемент, он должен наследовать все счетчики родителей. В противном случае элемент должен иметь пустой набор счетчиков. Затем элемент наследует значения счетчика от непосредственно предшествующего элемента в порядке документа.

Почему фрагмент без div работает?

В рабочем фрагменте (без div) происходит следующее:

• counter.h1 (добавлен префикс для отличия от элемента) создается (или reset) в body, а его начальное значение устанавливается равным 0.
• Все элементы наследуют свои родительские счетчики, и поэтому каждый элемент внутри body получает counter.h1. Когда встречается первый h1, значение counter.h1 увеличивается до 1. Когда встречается следующий h1, он наследует значение счетчика от предыдущего элемента и затем увеличивает его до 2. Счетчик
• counter.h2 создается в элементе h1, а значение равно 0. Это значение видно для братьев и сестер h1, и все они могут наследовать его.
• В этом фрагменте все элементы h2 на самом деле являются братьями и сестрами элемента h1, поэтому каждый элемент h2 наследует counter.h2, который уже был создан в h1 и просто увеличивает его значение. Итак, когда встречается первый h2 counter.h2, становится равным 1 и т.д.
• Подобно элементам h2, элементы h3 также являются братьями и сестрами как элементов h1, так и h2, поэтому они также наследуют counter.h1 и counter.h2. Вот почему нумерация остается верной в этом примере.

body {counter-reset: h1}
h1 {counter-reset: h2}
h2 {counter-reset: h3}
h1:before {counter-increment: h1; content: counter(h1)". "}
h2:before {counter-increment: h2; content: counter(h1)"." counter(h2)". "}
h3:before {counter-increment: h3; content: counter(h1)"." counter(h2)"." counter(h3)". "}

<!-- body creates counter.h1 and set to 0 -->
<h1>Heading 1 <!-- Inherits counter.h1 from parent, creates counter.h2 and set to 0 -->
  <!-- ::before being a child inherits all counters from parent, increments counter.h1 to 1 and displays value -->
</h1>
<p>Paragraph</p>
<h2>Heading 2 <!-- Inherits counter.h1, counter.h2 from sibling, creates counter.h3 and set to 0 -->
  <!-- ::before being a child inherits all counters from parent, increments counter.h2 to 1 and displays value -->
</h2>
<p>Paragraph</p>
<h3>Heading 3 <!-- Inherits counter.h1, counter.h2, counter.h3 -->
  <!-- ::before being a child inherits all counters from parent, increments counter.h3 to 1 and displays value -->
</h3>
<p>Paragraph</p>
<h3>2nd Heading 3 <!-- Inherits counter.h1, counter.h2, counter.h3 -->
  <!-- ::before being a child inherits all counters from parent, increments counter.h3 to 2 and displays value -->  
</h3>
<p>Paragraph</p>
<h2>2nd Heading 2 <!-- Inherits counter.h1, counter.h2, counter.h3, resets counter.h3 to 0 -->
  <!-- ::before being a child inherits all counters from parent, increments counter.h2 to 2 and displays value -->
</h2>
<p>Paragraph</p>
<h2>3rd Heading 2 <!-- Inherits counter.h1, counter.h2, counter.h3, resets counter.h3 to 0 -->
  <!-- ::before being a child inherits all counters from parent, increments counter.h2 to 3 and displays value -->
</h2>
<p>Paragraph</p>
<h1>2nd Heading 1 <!-- Inherits counter.h1, counter.h2, counter.h3, resets counter.h2 to 0 -->
  <!-- ::before being a child inherits all counters from parent, increments counter.h1 to 2 and displays value -->
</h1>

Ответ 2

Рассмотрим это (очень похоже на вашу структуру, немного проще):

body {
  counter-reset: h1;
}

h1:before { 
  content: counter(h1) ". ";
  counter-increment: h1;
}
h1 {
  counter-reset: h2;
}

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

<div>
  <h1>Heading first level 1</h1>
</div>
  <h2>Heading second level 1</h2>
  <h2>Heading second level 2</h2>
  <h2>Heading second level 3</h2>
  <h2>Heading second level 4</h2>
  <h2>Heading second level 5</h2>    
<h1>Heading first level 2</h1>
  <h2>Test</h2>
  <h2>Test</h2>
  <h2>Test</h2>
<h1>Heading first level 3</h1>
<h1>Heading first level 4</h1>