如何让CSS计数器跳过一个标题来制作一个带编号的节

Question

我正在处理一个页面，我希望标题有一个节号。但是跳过第一个h3报头并给出值"3"；(0.0.0("；

示例：

Heading 2 (1.0.0)
Heading 3 (0.0.0) <- This one needs 0.0.0 (Skip the first h3 on page)
Heading 3 (1.1.0) 
Heading 4 (1.1.1)
Heading 4 (1.1.2)
Heading 3 (1.2.0)
Heading 4 (1.2.1)
Heading 4 (1.2.2)
Heading 2 (2.0.0)
Heading 3 (2.1.0)
Heading 3 (2.2.0)
Heading 4 (2.2.1)
Heading 4 (2.2.2)
Heading 3 (2.3.0)
Heading 4 (2.3.1)

我已经尝试了一些东西：

h1 {
counter-reset: section;
}
h2 {
counter-reset: subsection;
padding-left: 50px;
}
h2::after {
counter-increment: section;
content: " (" counter(section) "." counter(subsection) "."
counter(subsubsection) ") ";
}
h3::before {
counter-increment: subsection;
}
h3 {
counter-reset: subsubsection;
padding-left: 150px;
}
h3::after {
counter-increment: subsection;
content: " (" counter(section) "." counter(subsection) "."
counter(subsubsection) ") ";
}
h4 {
padding-left: 250px;
}
h4::after {
counter-increment: subsubsection;
content: " (" counter(section) "." counter(subsection) "."
counter(subsubsection) ") ";
}

<h1>Test</h1>
<h2>Heading h2</h2>
<h3>Heading 3 (0.0.0)</h3>
<!--^ skip this one ^-->
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h4>Heading 4</h4>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h4>Heading 4</h4>
<h2>Heading h2</h2>
<h3>Heading 3</h3>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h4>Heading 4</h4>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

我想知道我该怎么做，或者是否有什么可以看的。

旁注：我还注意到，如果有办法防止这种情况发生，我会重复代码。

CodePen演示

Answer 1

h1 {
counter-reset: section;
}
h2 {
padding-left: 50px;
counter-reset: subsection subsubsection;
}
h2::after {
counter-increment: section;
content: " (" counter(section) "." counter(subsection) "."
counter(subsubsection) ") ";
}
h3:not(.RuleZero)::before {
counter-increment: subsection;
}
h3 {
padding-left: 150px;
}
h3:not(.RuleZero) {
counter-reset: subsubsection;
counter-increment: subsection;
}
h3:not(.RuleZero)::after {
content: " (" counter(section) "." counter(subsection) "."
counter(subsubsection) ") ";
}
h4 {
padding-left: 250px;
}
h4::after {
counter-increment: subsubsection;
content: " (" counter(section) "." counter(subsection) "."
counter(subsubsection) ") ";
}

<h1>Test</h1>
<h2>Heading 2</h2>
<h3 class="RuleZero">Heading 3 (0.0.0)</h3>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h4>Heading 4</h4>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h4>Heading 4</h4>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h4>Heading 4</h4>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

CodePen演示