我的理解是，计数器重置是在父容器上设置的，用于定义计数器。然后，使用要递增的每个子元素上的计数器名称设置计数器增量，当然，还可以使用内容属性的计数器名称来显示它。
但在w3schools中给出的例子中，计数器重置是针对兄弟姐妹而不是家长设置的，我不明白这是怎么回事？
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}<body>
<h1>HTML and CSS h1</h1>
<h2>HTML Tutorial h2</h2>
<h2>CSS Tutorial h2</h2>
<h2>Bootstrap Tutorial h2</h2>
<hr>
<h1>JavaScript h1</h1>
<h2>JavaScript Tutorial h2</h2>
<h2>jQuery Tutorial h2</h2>
<h2>JSON Tutorial h2</h2>
<hr>
<h1>Server Side h1</h1>
<h2>SQL Tutorial h2</h2>
<h2>PHP Tutorial h2</h2>
</body>现在，为什么计数器重置"submission"设置在h1上，然后在h2上递增？这里的逻辑在哪里？计数器重置不应该在父级上吗？为什么它设置在兄弟姐妹身上？
此外，为什么如果你在想要增加的元素上设置计数器增量，即使你没有在父元素上设置一个计数器，它也能正常工作，但如果你在伪元素上设置了计数器增量，它就不工作了？
.new {
padding-left:50px;
}
h3 {
counter-increment: c-test;
}
h3::before {
content: counter(c-test) " ";
background-color: red;
border-radius: 100px;
padding: 3px;
margin-right: 5px;
text-align: center;
width: 20px;
font-weight: normal;
display: inline-block;
}<div class="new">
<h3>Tokyo</h3>
<h3>Osaka</h3>
<h3>Nagoya</h3>
<h3>Fukuoka</h3>
<h3>Sapporo</h3>
</div>您可以在这里看到，计数器增量是在h3上设置的，而在父级上没有计数器rest，而且它工作得很好。
然而，这里：
.new {
padding-left:50px;
}
h3::before {
counter-increment: c-test;
content: counter(c-test) " ";
background-color: red;
border-radius: 100px;
padding: 3px;
margin-right: 5px;
text-align: center;
width: 20px;
font-weight: normal;
display: inline-block;
}<div class="new">
<h3>Tokyo</h3>
<h3>Osaka</h3>
<h3>Nagoya</h3>
<h3>Fukuoka</h3>
<h3>Sapporo</h3>
</div>计数器增量在pseudo元素内部，并且它没有被增量。为什么？
如果你现在只在父对象上设置一个计数器重置，它会再次工作：
.new {
padding-left:50px;
counter-reset:c-test;
}
h3::before {
counter-increment: c-test;
content: counter(c-test) " ";
background-color: red;
border-radius: 100px;
padding: 3px;
margin-right: 5px;
text-align: center;
width: 20px;
font-weight: normal;
display: inline-block;
}<div class="new">
<h3>Tokyo</h3>
<h3>Osaka</h3>
<h3>Nagoya</h3>
<h3>Fukuoka</h3>
<h3>Sapporo</h3>
</div>或者，如果您在父级中创建一个h2，然后在其中添加计数器重置，如下所示：
.new {
padding-left:50px;
}
h2 {
counter-reset: c-test;
}
h3::before {
counter-increment: c-test;
content: counter(c-test) " ";
background-color: red;
border-radius: 100px;
padding: 3px;
margin-right: 5px;
text-align: center;
width: 20px;
font-weight: normal;
display: inline-block;
}<div class="new">
<h2>CITIES</h2>
<h3>Tokyo</h3>
<h3>Osaka</h3>
<h3>Nagoya</h3>
<h3>Fukuoka</h3>
<h3>Sapporo</h3>
</div>为什么这样做？我不明白这个财产背后的逻辑。我认为计数器重置会启动计数器，或者重置计数器，它必须在父级中。
有人能解释一下这个财产背后的逻辑吗？
来自规范
计数器的作用域从文档中为该计数器设置了"计数器重置"的第一个元素开始，并包括元素的子体及其后续同级及其子体。但是，它不包括计数器作用域中的任何具有相同名称的元素，该计数器由元素的后一个同级上的"counter reset"或同一元素的后"counter reset"创建。
和
如果元素或伪元素上的"counter increment"或"content"引用的计数器不在任何"counter reset">的范围内，则实现应表现为"counter reset">已将该元素或伪元素上的计数器重置为0。
我认为以上两个都涵盖了你的所有问题。