CSS counter-increment Свойство
Пример
Создайте счетчик ("My-sec-счетчик") и увеличьте его по одному для каждого вхождения <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
свойство обычно используется вместе с свойством Счетчик-Сброс и свойством Content.
Значение по умолчанию: | none |
---|---|
Inherited: | no |
Animatable: | no. Читайте о animatable |
Version: | 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 ссылается на счетчик, который не был инициализирован счетчиком сброса, начальное значение по умолчанию равно 0 |
initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) |
inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Создайте счетчик ("My-sec-счетчик") и уменьшите его по одному для каждого вхождения <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 Справка: content Свойство
CSS Справка: counter-reset Свойство
HTML DOM Справочник: counterIncrement Свойство