CSS反递增不递增

Question

我有以下HTML标记

<h1>Article title</h1>
<h2>First section</h2>
<h3>First section, first subsection</h3>
<h2>Second section</h2>
<h2>Third section</h2>
<h3>Third section, first subsection</h3>
<h2>Fourth section</h2>
<h2>Fifth section</h2>
<h3>Fifth section, first subsection</h3>
<h3>Fifth section, second subsection</h3>
<h3>Fifth section, third subsection</h3>
...

以下是SCSS

body.page-id-4065 {
    counter-reset: h2;

    h2 { counter-reset: h3; }
    h3 { counter-reset: h4; }
    h4 { counter-reset: h5; }
    h5 { counter-reset: h6; }

    h2:before {color: $grey-dark; counter-increment: h2; content: counter(h2) ". "}
    h3:before {color: $grey-dark; counter-increment: h3; content: counter(h2) "." counter(h3) ". "}
    h4:before {color: $grey-dark; counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "}
    h5:before {color: $grey-dark; counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
    h6:before {color: $grey-dark; counter-increment: h6; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}

    h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before { content: ""; counter-increment: none }

    #reply-title:before { content: ''; }
}

似乎增量工作正常输出：

1. 第一节
   1.1。 第一节，第一小节
   
2. 第二节
   
3. 第三节
   3.1。 第三节，第一小节
   
4. 第四节
   
5. 第五节
   

但当它到达那里时，那些显示的几个H3没有计数器增量：

5.1。 第一小节
5.1。 第二小节
5.1。 第三小节

我似乎无法理解为什么它不会增加那些sub但是在顶级的那些上工作正常。 知道为什么会这样吗？

如果您想查看实时页面（向下滚动到标题＃5）： https ： //www.melopienso.com/blog/perros/comida/pienso/

谢谢！

PS：我在StackOverflow上研究过其他非常相似的帖子但没有成功。

Answer 1

它不起作用的原因是因为h2处于子级别（它具有h3不具有的父级）。

这有效：

<div> <!-- h2's first parent - also h3's first parent -->
  <h2>Fifth section</h2>
  <h3>Fifth section, first subsection</h3>
  <h3>Fifth section, first subsection</h3>
</div>

这有效：

<div> <!-- h2's first parent - h3's parent (not first) -->
  <h2>Fifth section</h2>

  <div>
    <h3>Fifth section, first subsection</h3>
  </div>

  <div>
    <h3>Fifth section, first subsection</h3>
  </div>
</div>

这不是：

<div>
  <div> <!-- h2's first parent - wait, there's no h3s in sub-levels! -->
    <h2>Fifth section</h2>
  </div>

  <h3>Fifth section, first subsection</h3>
  <h3>Fifth section, first subsection</h3>
</div>