Verwenden von CSS-Zählern zum Erstellen von Unterabschnitten mit einem Zähler-Reset

Question

Ich versuche, CSS-Zähler zum Erhöhen von Elementen, die Unterelemente angeben, zu erhalten. Vielleicht, weil der HTML-Code nicht verschachtelt ist, sieht das Zurücksetzen nicht so aus, als würde es funktionieren. Kann mir jemand helfen, warum zu verstehen? Wenn ich den Zähler sub-item in der Körperauswahl zurücksetzen, werden alle Unterelemente genau wie die Elemente behandelt, wobei das zweite Zurücksetzen ignoriert wird.

CSS-Definitionen:

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 Körper:

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

Hier ist ein jsfiddle für die Bequemlichkeit.

Answer 1

Ok, ich habe es herausgefunden. Ich habe einige Online-Beiträge gefunden, die vorgeschlagen haben, dass das Zurücksetzen in einem Pseudo-Selektor nicht funktioniert. Ich habe sie ausgezogen und es funktioniert jetzt wie erwartet. Dies scheint jedoch das Inkrement nicht zu beeinflussen.

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

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

hier ist die Arbeitslösung fiddle