Как правильно использовать counter(), counter-increment() и counter-reset() с вложенными заголовками? ⇐ CSS

[Anonymous]

У меня возникают проблемы с counter-reset(), когда между начальным объявлением и сбросом добавляется div.
У меня изначально было что-то вот так, с заголовками непосредственно под классом NumberedHeadings:

Код: Выделить всё

.numberedHeadings {
counter-reset: heading1counter 0 heading2counter 0 heading3counter 0 heading4counter 0;
}

.numberedHeadings h1.chapterHeading {
counter-reset: heading2counter 0 heading3counter 0 heading4counter 0;
counter-increment: heading1counter;
margin-top: 24px;
margin-bottom: 12px;
}

.numberedHeadings h1.chapterHeading::before {
display: inline-block;
padding-right: 8px;
content: counter(heading1counter) " ";
}

/* Repeat similar adjustments for h2, h3, and h4 */

/* Example for h2 */

.numberedHeadings h2.chapterHeading {
counter-reset: heading3counter 0 heading4counter 0;
counter-increment: heading2counter;
margin-top: 24px;
margin-bottom: 12px;
}

.numberedHeadings h2.chapterHeading::before {
display: inline-block;
padding-right: 8px;
content: counter(heading1counter) "." counter(heading2counter) " ";
}

Код: Выделить всё

Heading one (should be 1)


Heading two (should be 1.1)


Heading three (should be 2)


Heading four (should be 2.1)


Heading five (should be 2.2)


Heading 6 (should be 3)


Heading 7 (should be 4)


Heading 8 (should be 5)

Теперь мне нужно добавить дополнительный контейнер div вокруг каждого тег заголовка, подобный этому:

Код: Выделить всё

.numberedHeadings {
counter-reset: heading1counter 0 heading2counter 0 heading3counter 0 heading4counter 0;
}

.numberedHeadings h1.chapterHeading {
counter-reset: heading2counter 0 heading3counter 0 heading4counter 0;
counter-increment: heading1counter;
margin-top: 24px;
margin-bottom: 12px;
}

.numberedHeadings h1.chapterHeading::before {
display: inline-block;
padding-right: 8px;
content: counter(heading1counter) " ";
}

/* Repeat similar adjustments for h2, h3, and h4 */

/* Example for h2 */

.numberedHeadings h2.chapterHeading {
counter-reset: heading3counter 0 heading4counter 0;
counter-increment: heading2counter;
margin-top: 24px;
margin-bottom: 12px;
}

.numberedHeadings h2.chapterHeading::before {
display: inline-block;
padding-right: 8px;
content:  counter(heading1counter) "." counter(heading2counter) " ";
}

Код: Выделить всё

Heading one (should be 1)



Heading two (should be 1.1)



Heading three (should be 2)



Heading four (should be 2.1)



Heading five (should be 2.2)



Heading 6 (should be 3)



Heading 7 (should be 4)



Heading 8 (should be 5)

Однако я вижу, что когда это будет сделано, хотя счетчик-инкремент( ) запускается, counter-reset() нет.

Подробнее здесь: https://stackoverflow.com/questions/782 ... set-with-n