“离开子范围”时 CSS 计数器关闭

Question

不知道描述问题的正确方法，所以这里是JSFiddle。

这里的问题是 Para 1.3 和 Para 1.4 的编号已关闭：para 计数器在“离开”嵌套的 <section> 标记的范围时不会“重置”。

body { counter-reset: chapter 0; }

section { counter-reset: para 0; }

h2:before {
  counter-increment: chapter;
  content: counter(chapter) ". ";
}

section p:before {
  counter-increment: para;
  content: counter(chapter) "." counters(para, ".") ". ";
}

<h2>Chapter 1</h2>

<section>
  <p>Para 1.1</p>
  <p>Para 1.2</p>
  
  <section>
    <p>Para 1.2.1</p>
    <p>Para 1.2.2</p>
    
    <section>
      <p>Para 1.2.2.1</p>
      <p>Para 1.2.2.2</p>  
    </section>
  </section>
  
  <p>Para 1.3</p>
  <p>Para 1.4</p>
</section>

Answer 1

我认为这与 HTML 结构有关。 <section> 和 <p> 不能一起工作，因为您必须能够在 p 中包含一个部分。这是不可能的。

改为使用列表。因为您可以在 ul 中包含 li ，反之亦然。如果有帮助，请告诉我。

body { counter-reset: chapter 0; }

ul { counter-reset: para ;list-style:none }

h2:before {
  counter-increment: chapter;
  content: counter(chapter) ". ";
}

ul li:before {
  counter-increment: para;

  content: counter(chapter) "." counters(para, ".") ". ";
}

<h2>Chapter 1</h2>

<ul>
  <li>Para 1.1</li>
  <li>Para 1.2
   
  <ul>
    <li>Para 1.2.1</li>
    <li>Para 1.2.2

    <ul>
      <li>Para 1.2.2.1</li>
      <li>Para 1.2.2.2</li>  
    </ul>
    </li>
  </ul>

</li>
<li>Para 1.3</li>
<li>Para 1.4</li>

 
</ul>