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>