-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
100 lines (77 loc) · 4.28 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
---
title: CSS счётчики
slug: Web/CSS/CSS_counter_styles/Using_CSS_counters
---
{{CSSRef}}
CSS счётчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS для отслеживания количества их использования. Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе. CSS счётчики реализованы в CSS 2.1 ([ссылка на спецификацию](https://www.w3.org/TR/CSS21/generate.html#counters)).
Значение счётчика сбрасывается (инициализируется) при помощи {{cssxref("counter-reset")}}.
{{cssxref("counter-increment")}} может быть отображён на странице, используя функцию `counter()` или counters() в свойстве {{cssxref("content")}}.
## Использование счётчиков
Для того, чтобы использовать CSS счётчики, сначала необходимо сбросить их значение (0 по умолчанию). Для того, чтобы отобразить значение счётчика - используйте функцию `counter()`. Следующий пример прибавляет в начале каждого h3 элемента "Section <_значение счётчика_>:".
```css
body {
counter-reset: section; /* Устанавливает значение
счётчика, равным 0 */
}
h3::before {
counter-increment: section; /* Инкрементирует счётчик*/
content: "Секция " counter(section) ": "; /* Отображает текущее значение счётчика */
}
```
Пример:
```html
<h3>Вступление</h3>
<h3>Основная часть</h3>
<h3>Заключение</h3>
```
{{EmbedLiveSample("Использование_счётчиков", 200, 150)}}
## Вложенные счётчики
CSS счётчики могут быть очень полезны для создания нумерованных списков, потому что новая сущность CSS счётчика автоматически создаётся в дочерних элементах. Используя функцию `counters(), можно вставить строку между разными уровнями вложенных счётчиков. Пример:`
```css
ol {
counter-reset: section; /* Создаёт новый счётчик для каждого тега <ol> */
list-style-type: none;
}
li::before {
counter-increment: section; /* Инкрементируется только счётчик текущего уровня вложенности */
content: counters(section, ".") " "; /* Добавляем значения всех уровней вложенности, используя разделитель '.' */
/* Если необходима поддержка < IE8, необходимо убедиться, что после разделителя ('.') не стоит пробел */
}
```
Объединим с данным HTML:
```html-nolint
<ol>
<li>item</li> <!-- 1 -->
<li>item <!-- 2 -->
<ol>
<li>item</li> <!-- 2.1 -->
<li>item</li> <!-- 2.2 -->
<li>item <!-- 2.3 -->
<ol>
<li>item</li> <!-- 2.3.1 -->
<li>item</li> <!-- 2.3.2 -->
</ol>
<ol>
<li>item</li> <!-- 2.3.1 -->
<li>item</li> <!-- 2.3.2 -->
<li>item</li> <!-- 2.3.3 -->
</ol>
</li>
<li>item</li> <!-- 2.4 -->
</ol>
</li>
<li>item</li> <!-- 3 -->
<li>item</li> <!-- 4 -->
</ol>
<ol>
<li>item</li> <!-- 1 -->
<li>item</li> <!-- 2 -->
</ol>
```
Результат:
{{EmbedLiveSample("Вложенные_счётчики", 250, 350)}}
## Спецификации
{{Specifications}}
## Смотрите также
- {{cssxref("counter-reset")}}
- {{cssxref("counter-increment")}}