Синтаксис
counter-increment: none | inherit | идентификатор | целое число
Значения
- none
- Запрещает увеличение счетчика для текущего селектора.
- inherit
- Наследует значение родителя.
- идентификатор
-
Задает одну или несколько переменных, для которых требуется изменить значение счетчика. Переменные разделяются между собой пробелом.
- целое число
- Определяет значение приращения счетчика. По умолчанию оно равно 1. Допускается использовать отрицательные и нулевые значения.
Возможные сочетания значений свойств counter-reset и counter-increment показаны в табл. 1.
Табл. 1. Изменение нумерации списка
| Код |
Результат |
LI { list-style-type: none; }
OL { counter-reset: list -1; }
LI:before {
counter-increment: list;
content: counter(list) ". ";
}
|
Список начинается с нуля.
0, 1, 2 |
LI { list-style-type: none; }
OL { counter-reset: list; }
LI:before {
counter-increment: list 2;
content: counter(list) ". ";
} |
Выводятся все четные числа.
2, 4, 6 |
LI { list-style-type: none; }
OL { counter-reset: list -1; }
LI:before {
counter-increment: list list;
content: counter(list) ". ";
}
|
Выводятся все нечетные числа.
1, 3, 5 |
LI { list-style-type: none; }
OL { counter-reset: list 9; }
LI:before {
counter-increment: list;
content: counter(list) ". ";
}
|
Список начинается с 10.
10, 11, 12 |
Пример
<!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-increment</title>
<style type="text/css">
BODY {
counter-reset: heading; /* Инициируем счетчик */
}
H2:before {
counter-increment: heading; /* Указываем идентификатор счетчика */
content: "Глава " counter(heading) ". "; /* Выводим текст перед содержимым тега <H2> */
}
</style>
</head>
<body>
<h2>Теория ловли льва в пустыне</h2>
<h2>Методы инверсной кинематики</h2>
<h2>Ловля льва численными методами</h2>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства counter-increment
Примечание
Для элементов, у которых установлено display: none, значение счетчика не меняется.
|
