Синтаксис
counter-reset: none | inherit | идентификатор | целое число
Значения
- none
- Запрещает инициацию счетчика для текущего селектора.
- inherit
- Наследует значение родителя.
- идентификатор
-
Задает одну или несколько переменных, в которых будет храниться значение счетчика. Значения разделяются между собой пробелом.
- целое число
- Начальное значение каждого идентификатора. По умолчанию равно 0.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>counter-reset</title>
<style type="text/css">
LI { list-style-type: none; } /* Убираем исходную нумерацию у списка */
OL { counter-reset: list1; } /* Инициируем счетчик */
OL LI:before {
counter-increment: list1; /* Увеличиваем значение счетчика */
content: counter(list1) ". "; /* Выводим число */
}
OL OL { counter-reset: list2; } /* Инициируем счетчик вложенного списка */
OL OL LI:before {
counter-increment: list2; /* Увеличиваем значение счетчика вложенного списка */
content: counter(list1) "." counter(list2) ". "; /* Выводим число */
}
</style>
</head>
<body>
<ol>
<li>Пункт
<ol>
<li>Подпункт</li>
<li>Подпункт</li>
<li>Подпункт</li>
</ol>
</li>
<li>Пункт
<ol>
<li>Подпункт</li>
<li>Подпункт</li>
</ol>
</li>
</ol>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства counter-reset
Примечание
Для элементов, у которых установлено display: none, значение счетчика не меняется.
|
