CSS
Счетчики
Поиск…
Синтаксис
counter-set: [<counter-name> <integer>? ] + | никто
counter-reset: [<counter-name> <integer>? ] + | никто
counter-increment: [<counter-name> <integer>? ] + | никто
counter (<counter-name> [, <counter-style>]?)
счетчики (<counter-name>, <connector-string> [, <counter-style>]?)
параметры
| параметр | подробности |
|---|---|
| Счетчик-имя | Это имя счетчика, который необходимо создать или увеличить или распечатать. Это может быть любое пользовательское имя, которое желает разработчик. |
| целое число | Это целое число является необязательным значением, которое при представлении рядом с именем счетчика будет представлять начальное значение счетчика (в параметрах counter-set , свойства counter-reset ) или значение, по которому счетчик должен увеличиваться (в counter-increment ). |
| никто | Это начальное значение для всех 3 counter-* свойств. Когда это значение используется для counter-increment , это влияет на значение ни одного из счетчиков. Когда это используется для двух других, счетчик не создается. |
| счетчик стиле | Это указывает стиль, в котором должно отображаться значение счетчика. Он поддерживает все значения, поддерживаемые свойством list-style-type . Если none не используется, значение счетчика вообще не печатается. |
| Соединитель-строка | Это представляет строку, которая должна быть помещена между значениями двух разных уровней счетчика (например, «.» В «2.1.1»). |
замечания
Счетчики не являются новой темой в CSS. Он был частью спецификаций уровня CSS (2), и, следовательно, имеет очень высокую поддержку браузера.
Все браузеры, кроме IE6 и IE7, поддерживают CSS-счетчики.
Применение стилей римских цифр к выходу счетчика
CSS
body {
counter-reset: item-counter;
}
.item {
counter-increment: item-counter;
}
.item:before {
content: counter(item-counter, upper-roman) ". "; /* by specifying the upper-roman as style the output would be in roman numbers */
}
HTML
<div class='item'>Item No: 1</div>
<div class='item'>Item No: 2</div>
<div class='item'>Item No: 3</div>
В приведенном выше примере вывод счетчика будет отображаться как I, II, III (римские числа) вместо обычных 1, 2, 3, поскольку разработчик явно указал стиль счетчика.
Количество каждого элемента с помощью счетчика CSS
CSS
body {
counter-reset: item-counter; /* create the counter */
}
.item {
counter-increment: item-counter; /* increment the counter every time an element with class "item" is encountered */
}
.item-header:before {
content: counter(item-counter) ". "; /* print the value of the counter before the header and append a "." to it */
}
/* just for demo */
.item {
border: 1px solid;
height: 100px;
margin-bottom: 10px;
}
.item-header {
border-bottom: 1px solid;
height: 40px;
line-height: 40px;
padding: 5px;
}
.item-content {
padding: 8px;
}
HTML
<div class='item'>
<div class='item-header'>Item 1 Header</div>
<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
<div class='item-header'>Item 2 Header</div>
<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
<div class='item-header'>Item 3 Header</div>
<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
В приведенном выше примере номера каждого элемента отображаются на странице и добавляется номер элемента перед его заголовком (с использованием свойства content элемента .item-header :before псевдо). Живая демонстрация этого кода доступна здесь .
Внедрение многоуровневой нумерации с помощью счетчиков CSS
CSS
ul {
list-style: none;
counter-reset: list-item-number; /* self nesting counter as name is same for all levels */
}
li {
counter-increment: list-item-number;
}
li:before {
content: counters(list-item-number, ".") " "; /* usage of counters() function means value of counters at all higher levels are combined before printing */
}
HTML
<ul>
<li>Level 1
<ul>
<li>Level 1.1
<ul>
<li>Level 1.1.1</li>
</ul>
</li>
</ul>
</li>
<li>Level 2
<ul>
<li>Level 2.1
<ul>
<li>Level 2.1.1</li>
<li>Level 2.1.2</li>
</ul>
</li>
</ul>
</li>
<li>Level 3</li>
</ul>
Вышеприведенный пример многоуровневой нумерации с использованием счетчиков CSS. Он использует самонастраивающуюся концепцию счетчиков. Self nesting - это понятие, в котором, если элемент уже имеет счетчик с заданным именем, но ему необходимо создать другое, он создает его как дочерний элемент существующего счетчика. Здесь второй уровень ul уже наследует счетчик list-item-number из его родительского list-item-number но затем должен создать свой собственный номер list-item-number (для его дочерних list-item-number li ) и поэтому создает номер list-item-number[1] (счетчик для второй уровень) и устанавливает его под list-item-number[0] (счетчик для первого уровня). Таким образом, он достигает многоуровневой нумерации.
Выход выводится с использованием функции counters() вместо функции counter() потому что функция counters() предназначена для префикса значения всех счетчиков более высокого уровня (родительского) при печати результата.
