Счетчик 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. что невозможно.

использовать списки вместо. потому что вы можете включить 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>