Свойство CSS counter-reset
Пример
Создайте счетчик ("my-sec-counter") и увеличивайте его на единицу при каждом появлении селектора <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-increment и свойством
content .
Значение по умолчанию: | никто |
---|---|
Унаследовано: | нет |
Анимация: | нет. Читать об анимации |
Версия: | CSS2 |
Синтаксис JavaScript: | объект .style.counterReset="раздел" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Property | |||||
---|---|---|---|---|---|
counter-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Синтаксис CSS
counter-reset: none|name number|initial|inherit;
Значения свойств
Value | Description |
---|---|
none | Default value. No counters will be reset |
id number | The id defines which counter to reset. The number sets the value the counter is reset to on each occurrence of the selector. The default number value is 0 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Дополнительные примеры
Пример
Создайте счетчик ("my-sec-counter") и уменьшайте его на единицу для каждого вхождения селектора <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: свойство содержимого
Справочник по CSS: свойство counter-increment
CSS-функции: функция counter()
Справочник по HTML DOM: свойство counterReset