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