Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

CSS Учебник


CSS Продвинутый


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


CSS Справочники



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) ": ";
}
Попробуйте сами »


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

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

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 Создает или сбрасывает один или несколько счетчиков
counter() Возвращает текущее значение именованного счетчика


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.