CSS counter-reset Свойство
Пример
Создайте счетчик ("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-reset создает или сбрасывает один или несколько счетчиков CSS.
counter-reset свойство обычно используется вместе с свойством Counter-инкремент и свойством Content.
| Значение по умолчанию: | none |
|---|---|
| Inherited: | no |
| Animatable: | no. Читайте о animatable |
| Version: | CSS2 |
| Синтаксис JavaScript: | object.style.counterReset="section" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| counter-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Синтаксис CSS
counter-reset: none|name number|initial|inherit;
Значения свойств
| Значение | Описание |
|---|---|
| none | Значение по умолчанию. Счетчики не будут сброшены |
| id number | ID определяет, какой счетчик необходимо сбросить. Number задает значение счетчика сбрасывается для каждого вхождения селектора. Значение по умолчанию Number равно 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-increment Свойство
HTML DOM Справочник: counterReset Свойство