Personalizzazione dei contatori CSS negli elenchi ordinati: html, css

Voglio creare due liste HTML ordinate (indipendenti l'una dall'altra) con i seguenti formati e iniziare dai numeri, come presentato qui:

2.1
2.2
2.3
2.4


2.1.1
2.1.2

2.2.1
2.2.2
2.2.3

2.3.1
2.3.2

2.4.1
2.4.2

Come faccio a farlo con i CSS?

Qualsiasi aiuto sarebbe apprezzato poiché ho esaurito le risorse qui nel tentativo di capirlo.

Grazie!

risposte:

Prova questo

CSS

ol {
counter-reset: firststlevel;
list-style-type: none;
}
li:before {
display: inline-block;
content: counter(firststlevel);
counter-increment: firststlevel;
width: 2em;
margin-left: -2em;
}
ol ol {
counter-reset: secondlevel;
}
ol ol li:before{
content:counter(firststlevel) "."counter(secondlevel);
counter-increment: secondlevel;
}

ol ol ol {
counter-reset: thirdlevel;
}
ol ol ol li:before{
content:counter(firststlevel) "."counter(secondlevel)"."counter(thirdlevel);
counter-increment: thirdlevel;
text-indent:-5px;
}

HTML

    <ol>
<li>Main 1</li>
<ol>
<li>Child 1 of Main 1
<ol>
<li>Sub Child 1 of Child 1 of Main 1</li>
<li>Sub Child 1 of Child 1 of Main 1</li>
</ol>
</li>
<li>Child 2 of Main 1
<ol>
<li>Sub Child 1 of Child 2 of Main 1</li>
<li>Sub Child 2 of Child 2 of Main 1</li>
</ol>
</li>
</ol>
<li>Main 2</li>
<ol>
<li>Child 1 of Main 2
<ol>
<li>Sub Child 1 of Child 1 of Main 2</li>
<li>Sub Child 2 of Child 1 of Main 2</li>
</ol>
</li>
<li>Child 2 of Main 2
<ol>
<li>Sub Child 1 of Child 2 of Main 2</li>
<li>Sub Child 2 of Child 2 of Main 2</li>
<li>Sub Child 3 of Child 2 of Main 2</li>
</ol>
</li>
</ol>
</ol>

O qui è il Collegamento di Fiidle