Счетчик CSS

Пицца

Бургеры

Гамбургеры

CSS счетчики это "варианты", которые поддерживаются CSS. Значение вариантов можно увеличивать через CSS правила (следя за их использованием).

Счетчики позволяют вам изменять外观 в зависимости от местоположения контента в документе.

Автоматическая нумерация с счетчиком

CSS счетчики такие же, как "варианты". Значение вариантов можно увеличивать через CSS правила (следя за их использованием).

Чтобы использовать CSS счетчики, мы будем использовать следующие свойства:

  • counter-reset - создать или сбросить счетчик
  • counter-increment - увеличить значение счетчика
  • content - вставить созданное содержимое
  • counter() или counters() функция - добавить значение счетчика к элементу

Чтобы использовать CSS счетчики, сначала необходимо использовать counter-reset Создайте его.

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

Пример

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Раздел " counter(section) ": ";
}

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

Вложенные счетчики

Следующий пример создает счетчик для страницы (section) и для каждого <h1> элемента (subsection) создает счетчик.

"section" счетчик для каждого <h1> элемента计数, а также записывает "Раздел" и значение счетчика section, "subsection" счетчик для каждого <h2> элемента计数, а также записывает значение счетчика section и subsection:

Пример

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) " ";
}

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

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

Пример

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

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

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

Свойство Описание
content Использование с伪элементами ::before и ::after для вставки генерируемого контента.
counter-increment Инкремент одного или нескольких значений счетчиков.
counter-reset Создание или сброс одного или нескольких счетчиков.