counter-reset
Поддержка браузерами
| 12.0+ | 8.0+ | 2.0+ | 4.0+ | 9.6+ | 3.1+ |
Описание
Свойство counter-reset используется для сброса счётчика и установки ему начального значения. Счётчик сбрасывается и устанавливается в начальное значение каждый раз, когда HTML-элемент, для которого применялось свойство, повторно появляется на странице.
Изменение значения счетчика осуществляется с помощью свойства counter-increment, а способ нумерации (тип маркера) и вывод счётчика осуществляется свойством content.
Свойство counter-reset используется совместно со свойствами counter-increment и content.
| Значение по умолчанию: | none |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS2 |
| Синтаксис JavaScript: | object.style.counterReset="subsection" |
Синтаксис
counter-reset: none | имя [число];
Значения свойства
| Значение | Описание |
|---|---|
| none | Указывает, что счётчик для выбранного элемента не установлен. |
| имя [число] | Имя счётчика, в котором будет храниться значение счётчика. После имени счётчика через пробел можно указать целое число, определяющее начальное значение счётчика, которое будет присваиваться счётчику при его сбросе. По умолчанию счётчик инициализируется 0 (нулём). |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
body { counter-reset: section; } /*инициализируем два счетчика*/
h1 { counter-reset: subsection; }
h1:before {
counter-increment: section 1; /*определяем инкремент для разделов*/
content: "Раздел " counter(section) ". ";
}
h2:before {
counter-increment: subsection 1; /*определяем инкремент для подразделов*/
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>Самоучитель HTML</h1>
<h2>Справочник HTML</h2>
<h2>Самоучитель XHTML</h2>
<h2>Самоучитель CSS</h2>
<h1>Программирование</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>Самоучитель XML</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>
</html>
Результат данного примера в окне браузера:
