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。第一节，第一小节


第二部分

第三部分   3.1。第三节，第一小节


第四部分


第五节

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

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

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

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

谢谢！

P.S：我在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>

CSS反递增不递增

1 个答案: