Подать заявку на

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>

То мы получим такой вывод:

  1. aaa
    1. bbb
    2. ccc
  2. ddd
    1. eee
    2. fff
  3. ggg
    1. hhh
      1. iii
      2. 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,... */
}


После этого кода нумерация в списке правильная:

  1. aaa
    1. bbb
    2. ccc
  2. ddd
    1. eee
    2. fff
  3. ggg
    1. hhh
      1. iii
      2. jjj

←Вернуться