CSS: Wie Nummer div Container?

Question

https://jsfiddle.net/rcomvpm5/

Wie Sie in diesem Beispiel sehen können, arbeitet der verwendete Ansatz auf ungeordnete Liste, was sie tut, ist, dass es fügt Zahlen für jeden li Artikel.

Warum funktioniert die gleiche Methode nicht unter div?. Ich bin offen für Javascript-Ansatz.

ul.menu, 
 
div.container { 
 
    counter-reset: item; 
 
    list-style-type: none; 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 
ul.menu li::before, 
 
div.container::before { 
 
\t content: counter(item) " "; 
 
\t counter-increment: item; 
 
}

<ul class="menu"> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
</ul> 
 

 
<div class="container"> 
 
    <div>Item</div> 
 
    <div>Item</div> 
 
    <div>Item</div> 
 
    <div>Item</div> 
 
</div>

Answer 1

Sie benötigen die Kinder div.container div::before Elemente für Ihre Gegenelemente zum Ziel, den Behälter nicht Elternteil.

ul.menu, 
 
div.container { 
 
    counter-reset: item; 
 
    list-style-type: none; 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 
ul.menu li::before, 
 
div.container div::before { 
 
\t content: counter(item) " "; 
 
\t counter-increment: item; 
 
}

<ul class="menu"> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
</ul> 
 

 
<div class="container"> 
 
    <div>Item</div> 
 
    <div>Item</div> 
 
    <div>Item</div> 
 
    <div>Item</div> 
 
</div>

Answer 2

Ihre CSS fügt der Zähler vor dem .Behälter div, nicht jeder davon Kind divs ist. Versuchen Sie dies:

ul.menu li::before, 
div.container div::before { 
    content: counter(item) " "; 
    counter-increment: item; 
}