Встречное увеличение на родительском, но содержание на дочернем

Question

Я немного борюсь со свойствами css 'counter-increment' и 'counter-reset'. У меня уже отлично работает со списками, но когда дело доходит до тегов заголовка, например, все становится немного менее понятным для меня.

Представьте себе следующий макет:

<div id="root">
    <div class="section">
        <h1 class="header">Header</h1>

        <div class="section">
            <h2 class="header">Header</h2>
            <!-- can be nested multiple times -- >
        </div>
    </div>
    <div class="section">
        <h1 class="header">Header</h1>
        <!-- content -->
    </div>
</div>

Я бы хотел, чтобы теги заголовков были пронумерованы (включая подсчет вложенных файлов!), Но поскольку сами теги заголовков не встраиваются, но их родители не могут заставить его работать должным образом. Так что это то, что я до сих пор получил (основываясь на логике, но не на ближайшем решении того, чего я хочу достичь! Я перепробовал все возможные комбинации, которые мог придумать)

#root
{
    /* root should reset counter */
    counter-reset: section_header;
}

#root .section
{
    /* since every section has a header tag, we should count sections-divs, as they wrap children as well */
    counter-increment: section_header;
}

.section .header::before
{
    /* This would take care of the display, but I suspect it doesn't obtain the correct value since the scope of the counter is not available? */
    content: counters(section_header, ".") " ";
}

Я был бы признателен за любое направление к решению (если таковое существует).

пс. Я должен отметить, что я в основном проверял это на Chrome, но я нашел это и в других браузерах.

редактировать

Формат, который я ищу, это "1.1", "1.2", "1.2.1" и т. Д. Каждый вложенный раздел должен добавлять еще один слой счетчика, хотя я могу заставить его работать без многоуровневой (единой глубины) динамической многослойной структуры. расслоение довольно сложно достичь одновременно.

Answer 1

Обновление: я видел пример MDN, который вы, вероятно, использовали для его создания. Запутанная часть перевода этого в вашу разметку состоит в том, что они используют <ol> а также <li> теги, которые охватывают дочерние элементы. Это не имеет особого смысла в контексте заголовка <h_> элементы, но кажется, что вы должны держать дочерние элементы внутри них, чтобы выполнить то же самое. Я добавил элементы after и немного light css, чтобы показать, где заканчивается каждый элемент. Надеюсь это поможет.

.section {
  counter-reset: section;                /* Creates a new instance of the
                                            section counter with each ol
                                            element */
  list-style-type: none;
}

.header::before {
  counter-increment: section;            /* Increments only this instance
                                            of the section counter */
  content: counters(section, ".") " ";   /* Combines the values of all instances
                                            of the section counter, separated
                                            by a period */
}

.section{
  font-size: 16px;
  margin: 10px 0;
}
h1::after {
  content: ' (end h1)';
}

h2 {
  margin-left: 10px;
}
h2::after {
  content: ' (end h2)';
}

h3 {
  margin-left: 20px;
}
h3::after {
  content: ' (end h3)';
}

<div id="root">
  <div class="section">
    <h1 class="header">item</h1>          <!-- 1     -->
    <h1 class="header">item               <!-- 2     -->
      <div class="section">
        <h2 class="header">item</h2>      <!-- 2.1   -->
        <h2 class="header">item</h2>      <!-- 2.2   -->
        <h2 class="header">item           <!-- 2.3   -->
          <div class="section">
            <h3 class="header">item</h3>  <!-- 2.3.1 -->
            <h3 class="header">item</h3>  <!-- 2.3.2 -->
          </div>
         </h2>
         <h2 class="header">item 
          <div class="section">
            <h3 class="header">item</h3>  <!-- 2.4.1 -->
            <h3 class="header">item</h3>  <!-- 2.4.2 -->
            <h3 class="header">item</h3>  <!-- 2.4.3 -->
          </div>
        </h2>
        <h2 class="header">item</h2>      <!-- 2.5   -->
      </div>
    </h1>
    <h1 class="header">item</h1>          <!-- 3     -->
    <h1 class="header">item</h1>          <!-- 4     -->
  </div>
</div>