Свойство счетчика приращения CSS
Пример
Создайте счетчик ("my-sec-counter") и увеличивайте его на единицу при каждом появлении селектора <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: "Section "
counter(my-sec-counter) ". ";
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство counter-increment
увеличивает или уменьшает значение одного или нескольких счетчиков CSS.
Свойство counter-increment
обычно используется вместе со
свойством counter-reset и свойством
содержимого .
Значение по умолчанию: | никто |
---|---|
Унаследовано: | нет |
Анимация: | нет. Читать об анимации |
Версия: | CSS2 |
Синтаксис JavaScript: | объект .style.counterIncrement = "подраздел"; |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Property | |||||
---|---|---|---|---|---|
counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Синтаксис CSS
counter-increment: none|id|initial|inherit;
Значения свойств
Value | Description |
---|---|
none | Default value. No counters will be incremented |
id number | The id defines which counter to increment. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. If id refers to a counter that has not been initialized by counter-reset, the default initial value is 0 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Дополнительные примеры
Пример
Создайте счетчик ("my-sec-counter") и уменьшайте его на единицу для каждого вхождения селектора <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment:
my-sec-counter -1;
content: "Section "
counter(my-sec-counter) ". ";
}
Пример
Нумерация разделов и подразделов с пометкой «Раздел 1:», «1.1», «1.2» и т. д.:
body
{
/* Set "section" to 0 */
counter-reset: section;
}
h1
{
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h1::before
{
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
Пример
Создайте счетчик и увеличьте его на единицу (используя римские цифры) для каждого вхождения селектора <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: counter(my-sec-counter,
upper-roman) ". ";
}
Связанные страницы
Справочник по CSS: псевдоэлемент ::before
Справочник по CSS: псевдоэлемент ::after
Справочник по CSS: свойство содержимого
Справочник по CSS: свойство counter-reset
CSS-функции: функция counter()
Справочник по HTML DOM: свойство counterIncrement