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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
---
title: CSS счётчики
slug: Web/CSS/CSS_Counter_Styles/Using_CSS_counters
tags:
- CSS
- CSS счётчики
- вложенные счётчики
translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
original_slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
---
<div>{{CSSRef}}</div>
<p>CSS счётчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS для отслеживания количества их использования. Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе. CSS счётчики реализованы в CSS 2.1 (<a href="https://www.w3.org/TR/CSS21/generate.html#counters">ссылка на спецификацию</a>).</p>
<p>Значение счётчика сбрасывается (инициализируется) при помощи {{cssxref("counter-reset")}}. </p>
<p>{{cssxref("counter-increment")}} может быть отображён на странице, используя функцию <code>counter() или counters() в свойстве </code>{{cssxref("content")}}.</p>
<h2 id="Использование_счётчиков">Использование счётчиков</h2>
<p>Для того, чтобы использовать CSS счётчики, сначала необходимо сбросить их значение (0 по умолчанию). Для того, чтобы отобразить значение счётчика - используйте функцию <code>counter(). Следующий пример прибавляет в начале каждого h3 элемента </code>"Section <<em>значение счётчика</em>>:".</p>
<pre class="brush: css">body {
counter-reset: section; /* Устанавливает значение
счётчика, равным 0 */
}
h3::before {
counter-increment: section; /* Инкрементирует счётчик*/
content: "Секция " counter(section) ": "; /* Отображает текущее
значение счётчика */
}
</pre>
<p>Пример:</p>
<pre class="brush: html"><h3>Вступление</h3>
<h3>Основная часть</h3>
<h3>Заключение</h3></pre>
<p>{{EmbedLiveSample("Использование_счётчиков", 200, 150)}}</p>
<h2 id="Вложенные_счётчики">Вложенные счётчики</h2>
<p>CSS счётчики могут быть очень полезны для создания нумерованных списков, потому что новая сущность CSS счётчика автоматически создаётся в дочерних элементах. Используя функцию <code>counters(), можно вставить строку между разными уровнями вложенных счётчиков. Пример:</code></p>
<pre class="brush: css">ol {
counter-reset: section; /*Создаёт новый счётчик для каждого
тега <ol>*/
list-style-type: none;
}
li::before {
counter-increment: section; /*Инкрементируется только счётчик
текущего уровня вложенности*/
content: counters(section,".") " ";/*Добавляем значения всех уровней
вложенности, используя разделитель '.'*/
/*Если необходима поддержка < IE8,
необходимо убедиться, что после
разделителя ('.') не стоит пробел*/
}
</pre>
<p>Объединим с данным HTML:</p>
<pre class="brush: html"><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></pre>
<p>Результат:</p>
<p>{{EmbedLiveSample("Вложенные_счётчики", 250, 350)}}</p>
<h2 id="Спецификации">Спецификации</h2>
<table>
<thead>
<tr>
<th>Specification</th>
<th>Status</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}</td>
<td>{{Spec2("CSS3 Lists")}}</td>
<td>No change</td>
</tr>
<tr>
<td>{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>{{cssxref("counter-reset")}}</li>
<li>{{cssxref("counter-increment")}}</li>
</ul>
|
