CSS. Каскадные таблицы стилей. Подробное руководство.Символ-Плюс 2008

Применение счетчиков

Однако для действительного отображения счетчиков надо задать свойство content в сочетании с одним из определяющих счетчики значением. Чтобы увидеть принцип работы, рассмотрим нумерованный список в стиле XML:

clist type="ordered"> <item>First item</item> <item>Item two</item> <item>The third item</item> </list>

Применяя приведенные ниже правила к этой разметке XML, вы получили бы результат, показанный на рис. 12.22:

list[tуре="оrdered"] {counter-reset:ordered;} /* по умолчанию - 0 */ list[type-"ordered"] item {display:block;} list[type="ordered^M] item:before {counter-increment:ordered; content:counter(ordered) margin:0.25em0;}

Puc. 12.22. Нумерация элементов списка

Обратите внимание, что генерируемое содержимое, как обычно, размещается как строковое содержимое в начале ассоциированного с ним элемента. Таким образом, эффект аналогичен HTML-списку, для которого объявлено list-style-position:inside;.

Также заметьте, что элементы item - это обычные элементы, генерирующие наборы блочных элементов, т. е. счетчики ие ограничены лишь элементами, свойство display которых имеет значение list-item. Кстати, счетчнк может использовать любой элемент. Рассмотрим следующие правила:

hi:before {counter-reset:section subsec; counter-increment:chapter; content:counter(chapter) ";} h2:before {counter-reset:subsec; counter-increment:section;

content:counter(chapter )"." counter(section) ";} h3:before {counter-increment:subsec; content:counter(chapter) counter(section) counter(subsec) ";}

Результат их применения показан на рис. 12.23.

На рис. 12.23 показаны некоторые важные моменты процессов сброса и приращения счетчика. Обратите внимание, как элемент hi применяет счетчик chapte г, который по умолчанию начинает нумерацию с нуля