CSSカウンター

Question

を「子スコープを残すこと」の問題を記述するための正しい方法を知っているので、ここでは代わりにJSFiddleだしないときはオフになっています。ここ

問題がPara 1.3とPara 1.4のための番号がオフになっていることである：それは、ネストされた<section>タグの範囲を「葉」ときparaカウンタが「リセット」されません。

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>