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

Question

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

这里的问题是编号为Para 1.3andPara 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 中包含一个部分。这是不可能的。

改用列表。因为您可以包含liin ul，反之亦然。让我知道它是否有帮助。

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>