CSSカウンターを使用してカウンターリセット付きサブセクションを作成する

Question

サブカウンターを示す項目をインクリメントするCSSカウンターを取得しようとしています。おそらく、HTMLがネストされていないため、リセットは期待通りに機能していないように見えます。なぜ誰かが私の理解を助けることができますか？ボディーセレクターのsub-itemカウンターをリセットすると、すべてのサブアイテムはアイテムと同様に扱われ、2回目のリセットは無視されます。

CSSの定義：

body { 
    counter-reset: panel item; 
    font-family: monospace; 
} 

div.panel-heading:before { 
    counter-increment: panel; 
    content: "Panel " counter(panel, upper-roman) ". "; 
} 

div.panel-body div.item:before { 
    counter-increment: item; 
    content: "Item " counter(item) ". "; 
    counter-reset: sub-item; 
} 

div.panel-body div.sub-item:before { 
    counter-increment: sub-item; 
    content: "sub-item " counter(item) counter(sub-item, lower-alpha) ". "; 
} 

HTML本体：

<div class="panel"> 
    <div class="panel-heading"> 
    &lt;- should be I </div> 
    <div class="panel-body"> 
    <div class="item"> 
     &lt;- should be 1 
    </div> 
    <div class="sub-item"> 
     &lt;- should be 1a 
    </div> 
    <div class="sub-item"> 
     &lt;- should be 1b 
    </div> 
    <div class="sub-item"> 
     &lt;- should be 1c 
    </div> 
    <div class="item"> 
     &lt;- should be 2 
    </div> 
    <div class="sub-item"> 
     &lt;- should be 2a 
    </div> 
    <div class="sub-item"> 
     &lt;- should be 2b 
    </div> 
    </div> 
</div> 
<div class="panel"> 
    <div class="panel-heading"> 
    &lt;- should be II </div> 
    <div class="panel-body"> 
    <div class="item"> 
     &lt;- should be 3 
    </div> 
    <div class="sub-item"> 
     &lt;- should be 3a 
    </div> 
    <div class="item"> 
     &lt;- should be 4 
    </div> 
    <div class="sub-item"> 
     &lt;- should be 4a 
    </div> 
    <div class="sub-item"> 
     &lt;- should be 4b 
    </div> 
    <div class="sub-item"> 
     &lt;- should be 4c 
    </div> 
    </div> 
</div> 

はここで便宜上jsfiddleです。

Answer 1

私はそれを理解しました。疑似セレクタでリセットを提案してもうまくいかないというオンライン投稿がいくつか見つかりました。私はそれらを移動し、今は期待どおりに動作します。しかし、これはインクリメントには影響していないようです。

div.panel-body > div.item { 
    counter-increment: item; 
    counter-reset: sub-item; 
} 

div.panel-body > div.item:before { 
    content: "Item " counter(item) ". "; 
} 

ここで働いソリューションfiddle