Русский
Русский
English
Свойства CSS
Статистика
Реклама

counter-reset

Браузер
Internet Explorer
Chrome
Opera
Safari
Firefox
Версия
6.0
7.0
8.0
9.0
2.0
3.0
4.0
5.0
9.2
9.6
10
2.0
3.1
4.0
5.0
2.0
3.0
3.6
4.0
Поддержка
Не поддерживается
Не поддерживается
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Не поддерживается
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Краткая информация
CSS CSS2+
Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Ссылка на спецификацию открыть в новой вкладке
Описание
Устанавливает идентификатор, в котором будет храниться счетчик отображений определенного элемента, а также начальное значение счетчика. Такой счетчик может выводиться с помощью свойства content и псевдоэлементов after и before.
Синтаксис
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=windows-1251">
<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>

Демонстрация примера
Браузеры
Для элементов, у которых установлено display: none, значение счетчика не меняется.
Первоисточник - htmlbook.ru Автор - Влад Мержевич
Комментариев (-)
Имя
Электронная почта

Последние комментарии

© 2006-2025, heroes-3.ru