嵌套在div中的标题的CSS计数器

Question

我遇到了一个自己无法解决的CSS问题。

这很简单：CSS计数器处理没有div的标题，但不处理div中的标题

看看下面的例子。。。

这是有效的

h1 {
counter-reset: h2;
}
h2 {
counter-reset: h3;
}
h3 {
counter-reset: h4;
}
h2::before {
counter-increment: h2;
content: counter(h2) ". ";
}
h3::before {
counter-increment: h3;
content: counter(h2) "." counter(h3) ". ";
}
h4::before {
counter-increment: h4;
content: counter(h2) "." counter(h3) "." counter(h4) ". ";
}

<h1>Title</h1>
<h2>Section 1</h2>
<h2>Section 2</h2>
<h3>Subsection 1</h3>
<h3>Subsection 2</h3>
<h4>Subsubsection 1</h4>
<h4>Subsubsection 2</h4>
<h2>Section 3</h2>

这不起作用(计算工作量(

h1 {
counter-reset: h2;
}
h2 {
counter-reset: h3;
}
h3 {
counter-reset: h4;
}
h2::before {
counter-increment: h2;
content: counter(h2) ". ";
}
h3::before {
counter-increment: h3;
content: counter(h2) "." counter(h3) ". ";
}
h4::before {
counter-increment: h4;
content: counter(h2) "." counter(h3) "." counter(h4) ". ";
}

<h1>Title</h1>
<div><h2>Section 1</h2></div> <!-- correct: 1. -->
<div><h2>Section 2</h2></div> <!-- correct: 2. -->
<div><h3>Subsection 1</h3></div> <!-- correct: 2.1. -->
<div><h3>Subsection 2</h3></div> <!-- wrong: 2.1. instead of 2.2 -->
<div><h4>Subsubsection 1</h4></div> <!-- wrong: 2.0.1 instead of 2.2.1 -->
<div><h4>Subsubsection 2</h4></div> <!-- wrong: 2.0.1 instead of 2.2.2 -->
<div><h2>Section 3</h2></div> <!-- correct: 3. -->

也许有人知道这个问题的解决方法，并且可以解释为什么会发生这种情况。

我们非常感谢您的帮助。

Answer 1

如果我们给div一个类名，并将counter-reset切换到这些类，它就可以工作了。

h1 {
counter-reset: h2;
}
.h2 {
counter-reset: h3;
}
.h3 {
counter-reset: h4;
}
h2::before {
counter-increment: h2;
content: counter(h2) ". ";
}
h3::before {
counter-increment: h3;
content: counter(h2) "." counter(h3) ". ";
}
h4::before {
counter-increment: h4;
content: counter(h2) "." counter(h3) "." counter(h4) ". ";
}

<h1>Title</h1>
<div class="h2"><h2>Section 1</h2></div>
<div class="h2"><h2>Section 2</h2></div>
<div class="h3"><h3>Subsection 1</h3></div>
<div class="h3"><h3>Subsection 2</h3></div>
<div class="h4"><h4>Subsubsection 1</h4></div>
<div class="h4"><h4>Subsubsection 2</h4></div>
<div class="h3"><h2>Section 3</h2></div>