CSS
Если сделать разметку вида:
<ol>
<li>aaa
<ol>
<li>bbb</li>
<li>ccc</li>
</ol>
</li>
<li>ddd
<ol>
<li>eee</li>
<li>fff</li>
</ol>
</li>
</ol>
То мы получим такой вывод:
- aaa
- bbb
- ccc
- ddd
- eee
- fff
- ggg
- hhh
- iii
- jjj
Видно, что нумерация не работает так, как хотелось бы - каждый раз сбрасывается.
Чтобы она заработала должным образом нужно добавить следуюший CSS (в нем есть комментарии, объясняющие работу):
LI { list-style-type: none; } /* Убираем исходную нумерацию */
OL { counter-reset: list1; } /* Инициируем счетчик1 */
OL LI:before {
counter-increment: list1; /* Увеличиваем значение счетчика1 */
content: counter(list1) ". "; /* Выводим значение */
}OL OL { counter-reset: list2; } /* Инициируем счетчик2 вложенного списка */
OL OL LI:before {
counter-increment: list2; /* Увеличиваем значение счетчика2 */
content: counter(list1) "." counter(list2) ". "; /* Выводим значение типа 2.1, 2.2,... */
}OL OL OL { counter-reset: list3; } /* Инициируем счетчик3 вложенного списка */
OL OL OL LI:before {
counter-increment: list3; /* Увеличиваем значение счетчика3 */
content: counter(list1) "." counter(list2) "." counter(list3) ". "; /* Выводим значение типа 3.1.1, 3.1.2,... */
}
После этого кода нумерация в списке правильная:
- aaa
- bbb
- ccc
- ddd
- eee
- fff
- ggg
- hhh
- iii
- jjj
- hhh