Автоматические счётчики и нумерация
12.5 Автоматические счётчики и нумерация
Автоматическая нумерация в CSS2 контролируется двумя свойствами, 'counter-increment' и 'counter-reset'. Счётчики, определённые в этих свойствах, используются с функциями counter() и counters() свойства 'content'. 'counter-reset'
| Значение: | [ <identifier> <integer>? ]+ | none | inherit |
| Начальное: | none |
| Применяется: | ко всем элементам |
| Наследуется: | нет |
| Процентное: | N/A |
| Носитель: | все |
| Значение: | [ <identifier> <integer>? ]+ | none | inherit |
| Начальное: | none |
| Применяется: | ко всем элементам |
| Наследуется: | нет |
| Процентное: | N/A |
| Носитель: | все |
Свойство 'counter-increment' принимает одно или более имён счётчиков (идентификаторы), за каждым из которых может следовать целое число. Это число обозначает, насколько счётчик увеличивается при каждом появлении элемента. Увеличение по умолчанию - 1. Допустимы 0 и негативные значения.
Свойство 'counter-reset' также содержит список из одного или более имён счётчиков, за каждым из которых может следовать целое число. Целое число задаёт значение, в которое счётчик сбрасывается при каждом появлении элемента. По умолчанию - 0.
Если 'counter-increment' относится к счётчику, который не находится в области видимости (см. ниже) какого-либо 'counter-reset', то принимается, что счётчик установлен в 0 корневым элементом.
Пример(ы):
Здесь показан способ нумерации глав и разделов: "Chapter 1", "1.1", "1.2" и т.д.: H1:before { content: "Chapter " counter(chapter) ". "; counter-increment: chapter; /* Добавляет 1 к главе */ counter-reset: section; /* Устанавливает раздел в 0 */ } H2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section; }
Если элемент увеличивает/сбрасывает счётчик и использует его (в свойстве 'content' в псевдоэлементах :before или :after), то счётчик используется после того, как увеличен/сброшен.
Если элемент и увеличивает, и сбрасывает счётчик, то счётчик сначала сбрасывается, а затем увеличивается.
Свойство 'counter-reset' следует правилам каскадирования. Таким образом, в соответствии с каскадированием, следующая таблица стилей:
H1 { counter-reset: section -1 } H1 { counter-reset: imagenum 99 }сбросит только 'imagenum'. Чтобы сбросить оба счётчика, их нужно специфицировать вместе:
H1 { counter-reset: section -1 imagenum 99 }
