Come creare Liste con voci Annidate E Numerate come su Wikipedia

[Vincent.Zeno]

è sufficiente assegnare la classe a tutte le liste OL
ti riporto l'esempio di base, per semplicità:

css

OL.lista { counter-reset: item }
OL.lista LI { display: block }
OL.lista LI:before { content: counters(item, ".") " "; counter-increment: item }


html
<ol class="lista" >
  <li>one</li>
  <li>two
  <ol class="lista">
   <li>two.one</li>
   <li>two.two</li>
   <li>two.three</li>
  </ol>
     </li>
  <li>three 
  <ol class="lista">
   <li>three.one</li>
   <li>three.two
    <ol class="lista">
     <li>three.two.one</li>
     <li>three.two.two</li>
    </ol>
   </li>
   </ol>
     </li> 
  <li>four</li>
  </ol>

[Handerson]

è sufficiente assegnare la classe a tutte le liste OL
ti riporto l'esempio di base, per semplicità:

css

OL.lista { counter-reset: item }
OL.lista LI { display: block }
OL.lista LI:before { content: counters(item, ".") " "; counter-increment: item }


html
<ol class="lista">
  <li>one</li>
  <li>two
  <ol class="lista">
   <li>two.one</li>
   <li>two.two</li>
   <li>two.three</li>
  </ol>
     </li>
  <li>three 
  <ol class="lista">
   <li>three.one</li>
   <li>three.two</li>
    <ol class="lista">
     <li>three.two.one</li>
     <li>three.two.two</li>
    </ol>
   </ol>
     </li> 
  <li>four</li>
  </ol>

Ottimo! Allora funziona quasi tutto adesso! C'è solo un dettaglio che non mi torna e che ho evidenziato in rosso.
Con il seguente codice html:

<ol class="contents-list"> //alla fine ho chiamato content-list la classe nel foglio esterno
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc
      <ol class="contents-list">
       <li>abc</li>
        <ol class="contents-list">
         <li>abc</li>
        </ol>
       <li>abc</li>
        <ol class="contents-list">
         <li>abc</li>
        </ol>
      </ol>
  </li>
  <li>abc
   <ol class="contents-list">
     <li>abc</li>
     <li>abc</li>
     <li>abc</li>
     <li>abc</li>
    </ol>
   </li> 
  <li>abc</li>
</ol>

l'output è questo:

• 1.abc
• 2.abc
• 3.abc
• 4.abc
• 5.abc
  
  • 5.1.abc
    
    • 5.1.1.abc
    
    
  • 5.2.abc
    
    • 5.1.1.abc
  
  
• 6.abc
  
  • 6.1.abc
  • 6.2.abc
  • 6.3.abc
  • 6.4.abc
  
  
• 7.abc

Come si nota, in rosso è riportato un numero che secondo la logica dovrebbe essere 5.2.1. e che invece è ancora 5.1.1.

C'è qualcosa che mi sfugge?

Grazie