Сброс счетчика - CSS-хитрости

counter-resetСвойство позволяет автоматической нумерации элементов. Как упорядоченный список (

), но работает с любым элементом. Это особенно полезно при создании оглавления или нумерации заголовков для чего-то вроде дипломной работы. Счетчики применяются через свойство content. Простой пример:

article ( counter-reset: section; ) section ( counter-increment: section; ) section h2:before ( content: counter(section) '. '; )

counter-resetСвойство используется для сброса счетчика CSS к заданному значению.

Он является частью модуля счетчика CSS, который является частью сгенерированного контента, автоматической нумерации и перечисляет спецификацию CSS2.1, расширенную в спецификации CSS3 модуля генерируемого и замененного контента.

Синтаксис

counter-reset: ( ?)+ | none

Где…

• это имя счетчика, который вы хотите сбросить
• это значение для сброса счетчика на
• none отключить счетчик

body ( counter-reset: my-awesome-counter 0; )

Примечание: значение по умолчанию для целого числа равно 0. Если после имени счетчика не задано целое число, оно будет сброшено на 0. Таким образом, это работает как ожидалось:

body ( counter-reset: my-awesome-counter; )

Вы можете сбросить сразу несколько счетчиков с помощью списка, разделенного пробелами, каждый со своим определенным значением, если хотите.

body ( counter-reset: my-awesome-counter 5 my-other-counter; )

Будет установлено my-awesome-counterзначение 5 и my-other-counterзначение по умолчанию: 0.

Вы можете увидеть этот список , как: counter1 value1 counter2 value2 counter3 value3… . Если значение не указано, оно равно 0.

Демо

В следующей демонстрации счетчик articleсбрасывается sectionдо значения по умолчанию (0), которое затем увеличивается на единицу при каждом появлении раздела, а затем отображается перед заголовками разделов.

Посмотрите на эту ручку!

Дополнительная информация

• сброс счетчика в спецификации
• сброс счетчика в MDN

Поддержка браузера

Хром	Сафари	Fire Fox	Опера	IE	Android	iOS
2+	3.1+	Любой	9.2+	8+	Любой	Любой