counter-set

Базовая версия 2023

Новое

С декабря 2023 года эта функция работает на последних версиях устройств и браузеров. Возможно, эта функция не будет работать на более старых устройствах или браузерах.

Свойство counter-set CSS устанавливает счетчики CSS на элементе заданным значениям.

Если счетчики не существуют, свойство counter-set создаёт новый счетчик для каждого имени счетчика в списке пар «счетчик-значение», разделённых пробелами. Однако для создания нового счетчика рекомендуется использовать свойство counter-reset CSS.

Если для имени счетчика в списке нет значения, значение счетчика будет установлено на 0.

Попробуйте

Примечание: Значение счетчика можно увеличивать или уменьшать, используя свойство counter-increment CSS.

Синтаксис

/* Set "my-counter" to 0 */
counter-set: my-counter;

/* Set "my-counter" to -1 */
counter-set: my-counter -1;

/* Set "counter1" to 1, and "counter2" to 4 */
counter-set: counter1 1 counter2 4;

/* Cancel any counter that could have been set in less specific rules */
counter-set: none;

/* Global values */
counter-set: inherit;
counter-set: initial;
counter-set: revert;
counter-set: revert-layer;
counter-set: unset;

Свойство counter-set задаётся одним из следующих способов:

Имя <custom-ident> счетчика, необязательно с <integer>. Вы можете указать любое количество счетчиков для сброса, при этом каждое имя или пара «имя-число» отделяются пробелом.
Ключевое слово none значение.

Значения

<custom-ident>: Имя счетчика для установки.
<integer>: Значение, к которому устанавливается счетчик при каждом появлении элемента. По умолчанию 0, если не указано. Если на элементе нет счетчика с заданным именем, элемент создаст новый счетчик с начальным значением 0 (хотя затем он может немедленно установить или увеличить это значение до чего-то другого).
none: Установка счетчика не выполняется. Это можно использовать для переопределения counter-set , определённого в менее специфическом правиле.

Формальное определение

Начальное значение	`none`
Применяется к	всем элементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	по типу вычисленного значения

Формальный синтаксис

counter-set = 
  [ <counter-name> <integer>? ]+  |
  none

Примеры

Установка именованных счетчиков

h1 {
  counter-set: chapter section 1 page;
  /* Sets the chapter and page counters to 0,
     and the section counter to 1 */
}

Спецификации

Спецификация
Модуль CSS списки и счётчики уровень 3 # propdef-counter-set

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`counter-set`	85	85	68	71	17.2	85	68	60	17.2	14.0	85
`list-item`	85	85	68	71	17.2	85	68	60	17.2	14.0	85
`none`	85	85	68	71	17.2	85	68	60	17.2	14.0	85

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/counter-set