CSS Counters
Pizza
Hamburger
Hotdogs
CSS счетчики являются "переменные" поддерживается CSS, чьи значения могут быть увеличены на CSS правила (для отслеживания, сколько раз они используются). Счетчики позволяют настраивать внешний вид содержимого на основе его размещения в документе.
Автоматическая нумерация с счетчиками
Счетчики CSS похожи на "переменные". Значения переменных могут быть увеличены с помощью правил CSS (которые отслеживают, сколько раз они используются).
Для работы с счетчиками CSS мы будем использовать следующие свойства:
counter-reset
- Создает или сбрасывает счетчикcounter-increment
- Увеличивает значение счетчикаcontent
- Вставка сгенерированного содержимогоcounter()
orcounters()
Function-добавляет значение счетчика к элементу
Чтобы использовать счетчик CSS, его необходимо сначала создать с counter-reset
.
В следующем примере создается счетчик для страницы (в селекторе тела), затем увеличивается значение счетчика для каждого элемента <H2> и добавляется "раздел <значение Счетчика>:" в начало каждого элемента <H2>:
Пример
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Вложенные счетчики
В следующем примере создается один счетчик для страницы (раздела) и один счетчик для каждого элемента <H1> (подраздел). Счетчик «Секция» будет учитываться для каждого элемента <H1> с «сечением <значение счетчика сечений>.», а счетчик «подраздел» будет учитываться для каждого элемента <H2> с «<значение счетчика сечения>. < значение Счетчика подраздела > ":
Пример
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()
для вставки строки между различными уровнями вложенных счетчиков:
Пример
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
CSS Counter Properties
Свойство | Описание |
---|---|
content | Используется с элементами:: before и:: после псевдо-элементов для вставки сгенерированного содержимого |
counter-increment | Увеличивает одно или несколько значений счетчика |
counter-reset | Создает или сбрасывает один или несколько счетчиков |