Метод использования и примеры свойства CSS counter-increment

Свойство CSS counter-increment увеличивает значение одного или нескольких счетчиков. Это свойство очень полезно для создания автоматической нумерации.

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

Грамматика использования counter-increment

Грамматика этого свойства такая:

counter-increment: [ identifier integer ]1 или более пар | none | initial | inherit

Ниже приведен пример того, как использовать атрибут counter-increment.

　　body {
　　　counter-reset: section;
　　}
　　h1 {
　　　counter-reset: category;
　　}
　　h1:before {
　　　counter-increment: section;
　　　content: "Section " counter(section) ". ";　　　　　
　　}
　　h2:before {
　　　counter-increment: category;
　　　content: counter(section) "." counter(category) " ";
　　}

Значения свойств

В таблице ниже описаны значения этого свойства.

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

Совместимость браузеров для свойства counter-increment, числа в таблице показывают минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.

Дополнительное чтение

Узнайте больше в следующих руководствах:CSS伪元素.

Связанные свойства:content,counter-reset.