counter-set
Создайте счетчик ("my-counter"), установите его равным 5 и увеличивайте на единицу для каждого вхождения селектора "h2":
body {
/* Установить "my-counter" в 5 */
counter-set: my-counter 5;
}
h2::before {
/* Увеличить "my-counter" на 1 */
counter-increment:
my-counter;
content: "Раздел "
counter(my-counter) ". ";
}
Попробуйте сами »
Определение counter-set
CSS свойство counter-set
создает и устанавливает CSS счетчик на определенное значение.
CSS свойство counter-set
обычно используется вместе с свойством counter-increment и content.
Значение по умолчанию: | none |
---|---|
Унаследовано: | no |
Анимируемый: | no. Читайте о animatable |
Версия: | CSS2 |
JavaScript синтаксис: | object.style.counterУстановить="4" Попробуй |
Поддержка counter-set
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Свойство | |||||
---|---|---|---|---|---|
counter-set | 85.0 | 85.0 | 68.0 | Не поддерживается | 71.0 |
Синтаксис counter-set
counter-set: none|counter-name number|initial|inherit;
Значения counter-set
Значение | Описание |
---|---|
none | Значение по умолчанию. Установка счетчика не выполняется |
counter-name number | Имя устанавливаемого счетчика и значение, на которое устанавливается счетчик при каждом появлении селектора. Значение по умолчанию number равно 0 |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры counter-set
Создайте счетчик ("my-counter"), установите его равным 5 и уменьшайте на единицу для каждого вхождения селектора "h2":
body {
/* Установить "my-counter" в 5 */
counter-set: my-counter 5;
}
h2::before {
/* Уменьшить "my-counter" на 1 */
counter-increment:
my-counter -1;
content: "Раздел "
counter(my-counter) ". ";
}
Попробуйте сами »
Нумерация разделов и подразделов с помощью "Раздела 10:", "10.1", "10.2", и т.д.:
body
{
/* Установить "section" в 9 */
counter-set: section 9;
}
h1
{
/* Установить "subsection" в 0 */
counter-set: subsection 0;
}
h1::before
{
/* Увеличить "section" на 1 */
counter-increment: section;
content: "Раздел " counter(section) ": ";
}
h2::before {
/* Увеличить "subsection" на 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
Попробуйте сами »
Создайте счетчик, установите его равным 9 и увеличивайте на единицу (используя римские цифры) для каждого вхождения селектора <h2>:
body {
/* Установить "my-counter" в 9 */
counter-set: my-counter 9;
}
h2::before {
/* Увеличить "my-counter" на 1 */
counter-increment:
my-counter;
content: counter(my-counter,
upper-roman) ". ";
}
Попробуйте сами »
Страницы по теме counter-set
CSS Справочник: ::before псевдоэлемент
CSS Справочник: ::after псевдоэлемент
CSS Справочник: content свойство
CSS Справочник: counter-increment свойство
CSS functions: counter() function