Пытаюсь сделать иерархический вложенный список средствами css. В интернетах предлагается решение вида:
ol{
list-style: none;
counter-reset: num;
}
ol li:before{
content: counters(num,'.') ' ';
counter-increment: num;
}
И это работало, пока я не захотел использовать несколько списков на одной странице. По моим наблюдениям проблема появляется в Опере всегда, а в других браузерах когда списки находятся в разных уровнях вложенности внутри DOM. Вот пример кода:
<ol>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ol>
<div>
<ol>
<li>Пункт 1</li>
<li>Пункт 2
<ol>
<li>Пункт 2.1</li>
<li>Пункт 2.2
<ol>
<li>Пункт 2.2.1</li>
<li>Пункт 2.2.2</li>
</ol>
</li>
</ol>
</li>
<li>Пункт 3
<ol>
<li>Пункт 3.1</li>
</ol>
</li>
</ol>
</div>
Второй список я засунул в div, тем самым погрузив его на один уровень глубже, относительно первого списка. При такой конструкции во всех браузерах счётчики в css работают нелогично. Для второго списка появляется дополнительная нумерация так, словно этот список является вложенным в первый список. Прикладываю картинку, демонстрирующую, что я ожидаю получить, а что в итоге получается.
Есть ли решение данной проблемы для современных браузеров IE9+ средствами css без скриптов?