使用 CSS 我想制作一本规则手册，例如编号部分，其中 CSS 计数器跳过 header。但是想不通

Question

我正在处理一个页面，我希望标题有一个节号。但是跳过第一个 h3 header 并赋予它值“(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)

我已经尝试了一些东西：

HTML:

<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>

CSS:

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) ") ";
}

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

旁注： 我还注意到我正在重复代码，如果有一种方法可以防止那会很棒。

Answer 1

已找到解决方案！

Live Demo

Html:

<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>

CSS:

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) ") ";
}

使用 CSS 我想制作一本规则手册，例如编号部分，其中 CSS 计数器跳过 header。但是想不通

Using CSS I want to make a rule book like numbered section with the CSS counter skipping a header. But can't figure it out

html

css

counter

heading