counter-increment
Создайте счетчик ("my-sec-counter") и увеличивайте его на единицу для каждого вхождения селектора "h2":
body {
/* Установить "my-sec-counter" to 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
увеличивает или уменьшает значение одного или нескольких счетчиков CSS.
CSS свойство counter-increment
обычно используется вместе с свойством counter-reset и content.
Значение по умолчанию: | none |
---|---|
Унаследовано: | no |
Анимируемый: | no. Читайте о animatable |
Версия: | CSS2 |
JavaScript синтаксис: | object.style.counterIncrement = "subsection"; Попробуй |
Поддержка counter-increment
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Свойство | |||||
---|---|---|---|---|---|
counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Синтаксис counter-increment
counter-increment: none|id|initial|inherit;
Значения counter-increment
Значение | Описание |
---|---|
none | Значение по умолчанию. Никакие счетчики увеличиваться не будут |
id number | Идентификатор id определяет, какой счетчик увеличивать. Число id задает, на сколько счетчик будет увеличиваться при каждом появлении селектора. Приращение по умолчанию равно 1. Допускаются отрицательные значения. Если id ссылается на счетчик, который не был инициализирован путем сброса счетчика, начальное значение по умолчанию равно 0 |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры counter-increment
Create a counter ("my-sec-counter") and decrease it by one for each occurrence of the <h2> selector:
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) ". ";
}
Попробуйте сами »
Нумерация разделов и подразделов с помощью "Раздела 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) " ";
}
Попробуйте сами »
Create a counter and increase it by one (using Roman numerals) for each occurrence of the <h2> selector:
body {
/* Установить "my-sec-counter" в 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Увеличить "my-sec-counter" на 1 */
counter-increment:
my-sec-counter;
content: counter(my-sec-counter,
upper-roman) ". ";
}
Попробуйте сами »
Страницы по теме counter-increment
CSS Справочник: ::before псевдоэлемент
CSS Справочник: ::after псевдоэлемент
CSS Справочник: content свойство
CSS Справочник: counter-reset свойство
CSS functions: counter() function
HTML DOM справочник: counterIncrement свойство