counter-reset

Пример

Способ нумирования секций и подсекций с "Раздел 1", "1.1", "1.2", и т.д.:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
     body {counter-reset:section;}
     h1 {counter-reset:subsection;}
     h1:before
     {
          counter-increment:section;
          content:"Раздел " counter(section) ". ";
     }
     h2:before 
     {
          counter-increment:subsection;
          content:counter(section) "." counter(subsection) " ";
     }
</style>
</head>
<body>
<p><b>Примечание:</b> Internet Explorer 8 (и выше) поддерживает эти свойства если указан !DOCTYPE.</p>
<h1>Учебники HTML</h1>
<h2>Учебник HTML</h2>
<h2>Учебник XHTML</h2>
<h2>Учебник CSS</h2>
<h1>Учебники сценариев</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>Учебники XML</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>
</html>

Результат выполнения кода выше:

Попробуйте сами

Определение и использование

Свойство counter-reset создает или сбрасывает один или несколько счетчиков.

Свойство counter-reset обычно используется вместе со свойством counter-increment и свойством content.

Значение по умолчанию:	none
Унаследованный:	нет
Версия:	CSS2
Синтакс JavaScript:	`object.style.counterReset="subsection"`

Поддержка браузеров

Свойство counter-reset поддерживается во всех ведущих браузерах.

Примечание: Internet Explorer 8 (и выше) поддерживает свойство counter-reset если указан !DOCTYPE.

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

Значение	Описание
none	Счетчики не обнуляются. Это по умолчанию
id number	id указывает какой счетчик будет обнулен. number устанавливает значение счетчика на каждое вхождение селектора. Значение обнуления по умолчанию 0
inherit	Указывает, что значение свойства counter-reset должно быть унаследовано от родительского элемента

Связанные страницы

CSS ссылка: :before

CSS ссылка: :after

CSS ссылка: content

CSS ссылка: counter-increment

Была ли эта информация полезной?

Да Нет