Июль 24th, 2012 
Archi Некоторое время назад Kukutz интересовался у меня, как с помощью HTML/CSS можно верстать многоуровневые нумерованные списки «как в ворде». В тот момент мне в голову пришел только извратный вариант использования list-style-image или background-image, где нумерация типа «1.3.» задавалась бы графикой. Дурацкая идея, конечно.
Но пару дней назад я вспомнил о некоторых замечательных CSS свойствах. Полистав спецификацию, я понял, что задача решаема, при этом будет сохранена семантика в HTML. Единственное (но самое важное!) ограничение — абсолютно правильно работает пример только в Opera 7.0. Я тестировал в более ранних версиях этого браузера (нумерация в списках нарушается), а также в Mozilla 1.0 и Internet Explorer 6.0 (априори не должно работать) — увы и ах. Возможно, в более свежих версиях Gecko-based браузеров всё хорошо, я не могу сказать.
Решается всё следующим CSS кодом
display:block
}
ol>li:before{
content:counters(item,».») «. «;
counter-increment:item
}
ol{
counter-reset:item
}
Обратите внимание на пробел во фрагменте «. «. С его помощью мы создаём отступ между нумерацией и текстом. CSS 2 селекторы (ol>li) используются для того, чтобы не обрабатывались элементы вложенных ненумерованных списков.
HTML код получается простым и семантически верным:
<li>one
<ol>
<li>one-one
<ol>
<li>one-one-one</li>
<li>one-one-two</li>
<li>one-one-three</li>
</ol>
</li>
<li>one-two</li>
<li>one-three</li>
</ol>
</li>
<li>two</li>
<li>three
<ol>
<li>three-one</li>
<li>three-two</li>
<li>three-three</li>
</ol>
</li>
</ol>
Теорию про счётчики и автоматическую нумерацию рассказывать не буду. Кому интересно — см. спецификацию.
Спасибо за внимание. Был рад снова вас видеть 
Источник: internet-technologies.ru
Опубликовано в рубрике 
Метки: