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

Свойство counter-reset CSS используется в сочетании с свойством counter-increment для создания автоматических счетчиков, которые увеличиваются, и с свойством content для отображения значения счетчика.

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

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

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

counter-reset:　[　identifier　integer　]　1　or　more　pairs　|　none　|　initial　|　inherit

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

　　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-reset, номера в таблице представляют собой минимальную версию браузера, поддерживающего этот атрибут; все основные браузеры поддерживают этот атрибут.

Для дальнейшего чтения

Узнайте подробнее из следующих руководств:CSS-декоративные элементы。

Связанные свойства:content，counter-increment。