Использование CSS счетчики
счетчики CSS, как "переменные". Значения переменных может быть увеличено по правилам CSS (который будет отслеживать, сколько раз они используются).
Для работы с CSS счетчиков мы будем использовать следующие свойства:
-
counter-reset- Создает или сбрасывает счетчик -
counter-increment- Приращивает значение счетчика -
content- Вставки контент -
counter()илиcounters()функция - Добавляет значение счетчика к элементу
Чтобы использовать CSS счетчик, он сначала должен быть создан с counter-reset .
Следующий пример создает счетчик для страницы (в селекторе тела), а затем увеличивает значение счетчика для каждого <h2> элемента и добавляет "Section < value of the counter >:" в начале каждого <h2> элемента:
пример
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Попробуй сам " Вложенные счетчики
Следующий пример создает один счетчик (раздел) страницы и один счетчик для каждого <h1> элемента (п). "section" счетчик будет учитываться для каждого <h1> элемента с "Section < value of the section counter >." , А "subsection" счетчик будет учитываться для каждого <h2> элемент с "< value of the section counter >.< value of the subsection counter >" :
пример
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 Счетчик Свойства
| Имущество | Описание |
|---|---|
| content | Используется с :: до и после :: псевдо-элементов, для вставки генерируемого содержимого |
| counter-increment | Приращивает один или несколько значений счетчика |
| counter-reset | Создает или сбрасывает один или несколько счетчиков |