Псевдоэлементы в CSS на самом деле очень просты в использовании, но многие люди теперь могут думать только о том, что значение атрибута содержимого, которое обычно используется в псевдоэлементах, поддерживает только строки. Другие часто используемые атрибуты контента. Также есть uri и counter. Сегодня я хочу представить вам conter (счетчик).
Счетчики в CSS похожи на переменные. Они могут реализовывать простые функции подсчета и отображать результаты на странице. Они широко использовались на ранних веб-сайтах. Для реализации счетчика необходимо использовать следующие атрибуты:
Давайте посмотрим, как счетчики используются в CSS.
1. Используйте счетчики для автоматической нумерации
Счетчики CSS увеличивают переменные в соответствии с правилами.
Счетчики CSS используют следующие свойства:
(1) counter-reset:name1 name2 создает или сбрасывает счетчик (одновременно можно определить несколько счетчиков, разделенных пробелами)
(2) счетчик-инкремент: переменная приращения шага имени (может увеличиваться на одно или несколько значений)
(3) content:counter(name) вставляет сгенерированный контент (используя псевдоэлементы до/после)
(4) Функция counter() или counters() добавляет значение счетчика к элементу.
При создании счетчика он должен быть создан в предыдущем теге или родительском теге тега. Если он определен в собственном теге, он будет недействителен.
Конкретные приложения:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Программирование Dotcpp</title><style>div{counter-reset:counter1;}h2{counter-reset:counter2;}h2:: перед{/*сначала установите размер шага*/counter-increment:counter11;content:'th'counter(count er1)'section';}p::before{/*Сначала установите размер шага*/counter-increment:counter21;content:'Секция 'counter(counter1)';</style></he ad><body><div><h2></h2><p></p><p></p><p></p><h2></h2><p></p> <p></p><p></p><p></p></div></body></html>Результаты запуска:
2. Инициализировать счетчик
Чтобы использовать счетчик, сначала необходимо использовать атрибут counter-reset для создания счетчика. Этот процесс называется инициализацией счетчика. Синтаксический формат атрибута counter-reset следующий:
сброс счетчика: нет|[<идентификатор><число>]
Описание параметра следующее:
(1) нет: запретить сброс счетчика;
(2) <идентификатор>: определите имя счетчика;
(3) <целое число>: определите начальное значение счетчика. Значение по умолчанию равно 0 и может быть отрицательным.
3. Счетчик увеличивается автоматически.
После инициализации счетчика вы можете использовать атрибут counter-increment, чтобы указать, когда счетчик будет увеличиваться. Синтаксис следующий:
счетчик-инкремент: нет|[<идентификатор><целое число>]
Описание параметра следующее:
(1) нет: предотвратить увеличение счетчика;
(2) <идентификатор>: определите имя счетчика, который необходимо увеличить;
(3) <целое число>: определите значение, на которое счетчик увеличивается каждый раз. Значение по умолчанию равно 1 и может быть отрицательным.
4. Дисплей счетчика
Наконец, есть способ отображения счетчика. Для отображения счетчика вы можете использовать функцию counter() или counters(). Синтаксис этих двух функций следующий:
счетчик (имя) счетчики (имя, строка, тип стиля списка)
Описание параметра следующее:
(1) имя: имя счетчика;
(2) строка: строка, используемая для объединения, когда счетчики используются вложенными;
(3) тип списка-стиля: Стиль, отображаемый счетчиком, может быть любым значением атрибута «тип списка-стиля», разрешенного в CSS.
Ниже приведен простой пример, демонстрирующий использование счетчиков:
<!DOCTYPEhtml><html><head><style>body{counter-reset:chapter;}h5,h6{margin:5px05px;}h5{counter-reset:section;counter-increment:chapter;}h6{counter- приращение:раздел;}h5:before{content:Chaptercounter(глава).; }h6:before{content:counter(chapter).counter(section);</style></head><body><h5>Глава 1</h5><h6>Раздел 1</h6>< h6> Нет. Раздел 2</h6><h6>Раздел 3</h6><h6>Раздел 4</h6><h5>Глава 2</h5><h6>Раздел 1</h6><h6>Глава Раздел 2</ h6><h6>Раздел 3</h6><h6>Раздел 4</h6></body></html>Результаты запуска:
5. Счетчик вложенности
Кроме того, счетчики также могут быть вложенными, а функцию counters() можно использовать для вставки строки между вложенными счетчиками на разных уровнях, как показано в следующем примере:
<!DOCTYPEhtml><html><head><style>ol{/*Создайте новый экземпляр счетчика для каждого элемента ol*/counter-reset:ol-list;list-style-type:none;}li:before{ / *Увеличить только текущий экземпляр счетчика*/counter-increment:ol-list;/*Увеличить значения, разделенные знаком "." для всех экземпляров счетчика*/content:counters(ol-list,.),;} < /style></head><body><ol><li>Том</li><li>Глава<ol><li>Раздел</li><li>Раздел</li><li>Раздел<ol ><li>Раздел</li><li>Раздел</li></ol></l i><li>Раздел<ol><li>Подраздел</li><li>Подраздел</li><li>Подраздел</li></ol></li></ol></li>< li>Глава</li><li>Глава</li></ol></body></html>Результаты запуска:
