html - CSS中的counter-set和counter-reset有什么区别？

Question

我最近一直在尝试为我的概念写作自动编号标题。我在 Internet 上找到的通常实现是这样的:

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 extension ):

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 <should be Chapter 1>
    Section 1 <should be Section 1>
        0.1 <Should be 1.1>
        0.1 <Should be 1.2>
        0.1 <Should be 1.3>
    Section 1 <should be Section 2>
        0.1 <should be 2.1>
        0.1 <should be 2.2>
        0.1 <should be 2.3>
Chapter 2 <should be Chapter 2>
    Section 1 <should be Section 1>
        0.1 <Should be 1.1>
        0.1 <Should be 1.2>
        ...

但是，如果我使用 counter-set(以一种奇怪的方式)，一切都会再次运行:

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 中的计数器有所了解，请分享您的知识:)任何一种都会有所帮助。

Answer 1

理论上，您应该使用counter-set 创建一个新的计数器，如果您想要重置现有的计数器，则只使用counter-reset。请注意，如果还没有计数器，counter-reset 将创建一个新计数器，因此，实际上，在正常情况下，它的内容并不多。

但是，当您对同级而不是父级执行 counter-reset 时，会有一些混淆。我认为这里发生的事情是您正在创建一个具有相同名称的新计数器，这就是为什么它没有按照您预期的方式递增。在这件事上，Firefox 和 Chrome 似乎对应该发生的事情有不同的解释。

关于 https://github.com/mdn/browser-compat-data/pull/15666 有一些讨论关于规范。

另一件事是 Safari 根本不支持 counter-set。出于我的目的，我只使用 counter-reset。