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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
---
title: counter()
slug: Web/CSS/counter()
tags:
- CSS
- CSS函数
- CSS计数器
translation_of: Web/CSS/counter()
---
<div>{{CSSRef}}</div>
<div><a href="/en-US/docs/Web/CSS">CSS</a> 函数 <code><strong>counter</strong></code><strong><code>()</code></strong>，返回一个代表计数器的当前值的字符串。它通常和伪元素搭配使用，但是理论上可以在支持<string>值的任何地方使用。</div>
<pre class="brush: css notranslate">/* 简单使用 */
counter(计数器名称);
/* 更改计数器显示 */
counter(countername, upper-roman)</pre>
<p>一个<a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">计数器</a>本身没有可见的效果，而是通过<code>counter()</code>函数（和<code><a href="/en-US/docs/Web/CSS/counters">counters()</a></code>函数）返回开发人员定义的字符串（或图像） 从而使计数器拥有很棒的作用。</p>
<div class="blockIndicator note">
<p><strong>注释：</strong><code>counter()</code>函数可以与任何CSS属性一起使用，但是对<code><a href="/en-US/docs/Web/CSS/content">"content"</a></code>以外的属性的支持是试验性的，对type-or-unit参数的支持很少。</p>
<p>在使用此功能之前，请仔细检查<a href="#Browser_compatibility">浏览器兼容性表</a>。</p>
</div>
<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>语法</strong></span></font></p>
<h3 id="值">值</h3>
<dl>
<dt><code><a href="/zh-CN/docs/Web/CSS/custom-ident"><custom-ident></a> 自定义标识</code></dt>
<dd>一个标识计数器的名称，区分大小写，并且与{{cssxref("counter-reset")}}和{{cssxref("counter-increment")}}中的“名称”相同。名称不能以两个破折号开头，并且不能为<code>none</code>, <code>unset</code>, <code>initial</code>, 或 <code>inherit</code>。</dd>
<dt><code style="white-space: nowrap;"><counter-style> 计数器样式</code></dt>
<dd>计数器样式名称或 <code><a href="/en-US/docs/Web/CSS/symbols">symbols()</a></code> 函数，其中计数器样式名称是数字，字母或符号的简单预定义计数器样式，复杂的东亚或埃塞俄比亚长手预定义计数器样式，或其他<a href="/en-US/docs/Web/CSS/CSS_Counter_Styles">预定义计数器样式</a>。如果省略，则计数器样式默认为十进制。</dd>
</dl>
<h3 id="正式语法">正式语法</h3>
<pre class="syntaxbox notranslate">counter( <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/custom-ident" title="The <custom-ident> CSS data type denotes an arbitrary user-defined string used as an identifier. It is case-sensitive, and certain values are forbidden in various contexts to prevent ambiguity."><custom-ident></a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/counter#counter-style"><counter-style></a><a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Question_mark_()" title="Question mark: the entity is optional">?</a> )
where
<code><counter-style> = <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/counter#counter-style-name"><counter-style-name></a> <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> symbols()</code>
where
<code><counter-style-name> = <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/custom-ident" title="The <custom-ident> CSS data type denotes an arbitrary user-defined string used as an identifier. It is case-sensitive, and certain values are forbidden in various contexts to prevent ambiguity."><custom-ident></a></code></pre>
<p><strong>示例</strong></p>
<h3 id="default_value_compared_to_upper_Roman">default value compared to upper Roman</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html; notranslate"><ol>
<li></li>
<li></li>
<li></li>
</ol></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css; highlight[2] notranslate">ol {
counter-reset: listCounter;
}
li {
counter-increment: listCounter;
}
li::after {
content: "[" counter(listCounter) "] == ["
counter(listCounter, upper-roman) "]";
}</pre>
<h4 id="结果">结果</h4>
<p>{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}</p>
<h3 id="decimal-leading-zero_compared_to_lower-alpha"><dfn>decimal-leading-zero</dfn> compared to lower-alpha</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html; notranslate"><ol>
<li></li>
<li></li>
<li></li>
</ol></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css; highlight[2] notranslate">ol {
counter-reset: count;
}
li {
counter-increment: count;
}
li::after {
content: "[" counter(count, <dfn>decimal-leading-zero</dfn>) "] == ["
counter(count, lower-alpha) "]";
}</pre>
<h4 id="结果_2">结果</h4>
<p>{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">状态</th>
<th scope="col">注释</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}</td>
<td>{{Spec2("CSS3 Lists")}}</td>
<td>No change</td>
</tr>
<tr>
<td>{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.types.counter")}}</p>
<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>另请参阅</strong></span></font></p>
<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">使用CSS计数器</a></li>
<li>{{cssxref("counter-reset")}}</li>
<li>{{cssxref("counter-set")}}</li>
<li>{{cssxref("counter-increment")}}</li>
<li>{{cssxref("@counter-style")}}</li>
<li>CSS <code><a href="/en-US/docs/Web/CSS/counters">counters()</a></code> 函数</li>
</ul>
|
