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

В приведенном ниже коде мне нужно использовать тег div в верхней части HTML для стилизации. Без тега div теги hx соответствуют нумерации, но с div все происходит совершенно неправильно. Мне нужно this, чтобы работать как this, но с тегом div все еще на месте, и мне нужно, чтобы он работал для div с разными идентификаторами. Любые идеи?

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) ". "}

<div class="varies">
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</div>
<p>Morbi efficitur nibh metus, a vehicula mauris tristique ac. Duis ornare metus eget iaculis hendrerit.</p>
  <h2>Morbi nisi lacus, ultricies sit amet turpis a, aliquet congue nulla.</h2>
        <p>Duis eget facilisis nisl.</p>
    <h3>Donec tincidunt purus quam, ut accumsan lorem hendrerit a.</h3>
      <p>Aenean in mattis quam.</p>
    <h3>Maecenas a nulla sit amet ligula facilisis tincidunt lacinia non enim.</h3>
      <p>Aliquam dignissim turpis placerat, facilisis magna et, venenatis purus.</p>
  <h2>Suspendisse tempus eu elit nec malesuada.</h2>
        <p>In ut sollicitudin nisi. Praesent non porttitor ante, molestie scelerisque mauris.</p>
  <h2>Vivamus eu turpis efficitur, ornare risus in, consectetur tellus.</h2>
        <p>Cras pellentesque orci eu placerat mollis.</p>      
<h1>Duis eu nulla et tellus porttitor auctor.</h1>

Ответ 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>