Question

不知道描述问题的正确方法，所以请改为JSFiddle。

此处的问题是Para 1.3和Para 1.4的编号已关闭：para计数器未＆＃34;重置＆＃34;当它离开＆＃34;离开＆＃34;嵌套<section>标记的范围。

＆＃13;

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, ".") ". ";
}

＆＃13;

<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>

＆＃13;

Answer 1

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

使用列表代替。因为您可以在li中加入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>

当＆＃34;离开儿童范围＆＃34;时，CSS计数器关闭。

1 个答案: