CSS-счётчики

Счётчики CSS задаются через переменную, и переменная увеличивается согласно правилам.

Использование счётчиков для автоматической нумерации

Счётчики CSS увеличивают переменную согласно правилам.

Счётчики CSS используют следующие свойства:

  • counter-reset- Создание или сброс счётчиков
  • counter-increment- Инкрементирование переменных
  • content- Вставка сгенерированного содержимого
  • counter()илиcounters()Функция - добавляет значение счётчика к элементу

Чтобы использовать счётчики CSS, сначала нужно создать их с помощью counter-reset:

В следующем примере создаётся счётчик на странице (в селекторе body). Значение счётчика каждого элемента <h2> увеличивается, и перед каждым элементом <h2> добавляется "Section <".значение счётчика>:"

Примеры CSS

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

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

вложенные счётчики

Следующий пример создаёт счётчик на странице, добавляя значение счётчика "Section <" перед каждым элементом <h1>.Значение счётчика для главного заголовка>.", значение вложенного счётчика размещается перед элементом <h2>, с содержимым "<"Значение счётчика для главного заголовка>.<Значение счётчика для подзаголовка>":

Примеры CSS

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

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

Счётчики также можно использовать в списках, где дочерние элементы списка создаются автоматически. Здесь мы используемcounters()Функция для вставки строк на разных уровнях вложенности:

Примеры CSS

ol { counter-reset: section; list-style-type: none; } li::before { counter-increment: section; content: counters(section,".") " "; }

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

Свойства счётчиков CSS

Свойство Описание
content Используйте псевдоэлементы ::before и ::after для вставки автоматически генерируемого содержимого
counter-increment Увеличивает одно или несколько значений
counter-reset Создаёт или сбрасывает один или несколько счётчиков
Другие расширения