СSS Свойство counter-reset
Пример
Создать счетчик ("my-sec-counter") и увеличить его на единицу для каждого вхождения селектора <h2>:
body {
/* установка "my-sec-counter" с 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* увеличение "my-sec-counter" на 1 */
counter-increment:
my-sec-counter;
content: "Section "
counter(my-sec-counter) ". ";
}
Попробуйте сами »
Определение и использование
Свойство counter-reset создает или сбрасывает один или несколько счетчиков CSS.
Свойство counter-reset обычно используется вместе с counter-increment и content.
| Значение по умолчанию: | none |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет. Прочитать о animatable |
| Версия: | CSS2 |
| JavaScript синтаксис: | object.style.counterReset="section" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| counter-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS Синтаксис
counter-reset: none|name number|initial|inherit;
Значения свойств
| Значение | Описание |
|---|---|
| none | Значение по умолчанию. Никакие счетчики не будут сброшены |
| id number | Идентификатор id определяет, какой счетчик следует сбросить. Число задает значение, на которое сбрасывается счетчик при каждом вхождении селектора. Значение по умолчанию number равно 0 |
| initial | Устанавливает для этого свойства значение по умолчанию. Прочитать о initial |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
Примеры
Пример
Создать счетчик ("my-sec-counter") и увеличить его на единицу для каждого вхождения селектора <h2>:
body {
/* установка "my-sec-counter" с 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* уменьшение "my-sec-counter" на 1 */
counter-increment:
my-sec-counter -1;
content: "Section "
counter(my-sec-counter) ". ";
}
Попробуйте сами »
Пример
Нумерация разделов и подразделов с "Section 1:", "1.1", "1.2", и т.д.:
body
{
/* установка "section" с 0 */
counter-reset: section;
}
h1
{
/* установка "subsection" с 0 */
counter-reset: subsection;
}
h1::before
{
/* увеличение "section" на 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* увеличение "subsection" на 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
Попробуйте сами »
Пример
Создайте счетчик и увеличьте его на единицу (используя римские цифры) для каждого вхождения селектора <h2>:
body {
/* установка "my-sec-counter" на 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* увеличение "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: counter(my-sec-counter,
upper-roman) ". ";
}
Попробуйте сами »
Связанные страницы
CSS Справочник: Псевдо элемент ::before псевдо элемент
CSS Справочник: Псевдо элемент ::after псевдо элемент
CSS Справочник: Свойство content
CSS Справочник: Свойство counter-increment
HTML DOM Справочник: Свойство counterReset
