Html ordenou lista 1.1, 1.2 (contadores aninhados e escopo) não funciona
Eu uso contadores aninhados e escopo para criar uma lista ordenada:
<code>ol { counter-reset: item; padding-left: 10px; } li { display: block } li:before { content: counters(item, ".") " "; counter-increment: item }</code>
<code><ol> <li>one</li> <li>two</li> <ol> <li>two.one</li> <li>two.two</li> <li>two.three</li> </ol> <li>three</li> <ol> <li>three.one</li> <li>three.two</li> <ol> <li>three.two.one</li> <li>three.two.two</li> </ol> </ol> <li>four</li> </ol></code>
Espero o seguinte resultado:
<code>1. one 2. two 2.1. two.one 2.2. two.two 2.3. two.three 3. three 3.1 three.one 3.2 three.two 3.2.1 three.two.one 3.2.2 three.two.two 4. four </code>
Em vez disso, isso é o que eu vejo(numeração incorreta):
<code>1. one 2. two 2.1. two.one 2.2. two.two 2.3. two.three 2.4 three <!-- this is where it goes wrong, when going back to the parent --> 2.1 three.one 2.2 three.two 2.2.1 three.two.one 2.2.2 three.two.two 2.3 four </code>
Eu não tenho ideia, alguém vê onde está errado?
Aqui está um JSFiddle:http://jsfiddle.net/qGCUk/2/