В чем разница между счетчиком-установкой и счетчиком-сбросом в CSS? ⇐ CSS

[Гость]

Недавно я пытался автоматически нумеровать заголовки для своих статей на Notion. Обычная реализация, которую я нашел в Интернете, такая:

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

body {
counter-reset: chapter;
}

h1 {
counter-reset: subchapter;
}

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

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

Как видно, можно использовать counter-reset для инициализации счетчика. Но когда я использую ту же реализацию в Chrome для Notion (через это расширение Chrome):

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

body {
counter-reset: headings1;
}
div.notranslate[placeholder="Heading 1"] {
counter-reset: headings2;
}
div.notranslate[placeholder="Heading 2"] {
counter-reset: headings3;
}

div.notranslate[placeholder="Heading 1"]::before {
counter-increment: headings1;
content: "Chapter " counter(headings1) " ";
}
div.notranslate[placeholder="Heading 2"]::before {
counter-increment: headings2;
content: "Section " counter(headings2) " ";
}
div.notranslate[placeholder="Heading 3"]::before {
counter-increment: headings3;
content: counter(headings2) "." counter(headings3) ".";
}

это просто не может работать. Результат такой:

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

Chapter 1 
Section 1 
0.1 
0.1 
0.1 
Section 1 
0.1 
0.1 
0.1 
Chapter 2 
Section 1 
0.1 
0.1 
...

Однако, если я использую счетчик (странным образом), все снова работает:

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

body {
counter-set: headings1 headings2 headings3;
}

div.notranslate[placeholder="Heading 1"] {
counter-set: headings2;
}

div.notranslate[placeholder="Heading 2"] {
counter-set: headings3;
}

/*body {*/
/*    counter-reset: headings1;*/
/*}*/
/*div.notranslate[placeholder="Heading 1"] {*/
/*    counter-reset: headings2;*/
/*}*/
/*div.notranslate[placeholder="Heading 2"] {*/
/*    counter-reset: headings3;*/
/*}*/

div.notranslate[placeholder="Heading 1"]::before {
counter-increment: headings1;
content: "Chapter " counter(headings1) " ";
}
div.notranslate[placeholder="Heading 2"]::before {
counter-increment: headings2;
content: "Section " counter(headings2) " ";
}
div.notranslate[placeholder="Heading 3"]::before {
counter-increment: headings3;
content: counter(headings2) "." counter(headings3) ".";
}

Означает ли это, что для инициализации счетчика следует использовать counter-set вместо counter-reset? И в чем разница между counter-set и counter-reset?
Я понимаю, что это странный вопрос и источником проблемы может быть ошибка или что-то в этом роде. Но если вы знаете что-нибудь о счетчиках в CSS, поделитесь своими знаниями любые помогут.

Подробнее здесь: https://stackoverflow.com/questions/720 ... set-in-css