blob: 4a8fa1779759b0fe5814c8ce1eff778cf33b44e3 (
plain)
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
|
---
title: 使用CSS计数器
slug: Web/Guide/CSS/Counters
tags:
- CSS
- CSS List
- Web
- counter
- 教程
translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
---
<div>{{CSSRef}}</div>
<p>本质上CSS计数器是由CSS维护的变量，这些变量可能根据CSS规则增加以跟踪使用次数。这允许你根据文档位置来调整内容表现。 CSS计数器是CSS2.1中<a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">自动计数编号</a>部分的实现。</p>
<p>计数器的值通过使用{{cssxref("counter-reset")}} 和 {{cssxref("counter-increment")}} 操作，在 <code><a href="/en-US/docs/CSS/content" title="CSS/content">content</a></code> 上应用 <code>counter()</code> 或 <code>counters()</code>函数来显示在页面上。</p>
<h2 id="使用计数器">使用计数器</h2>
<p>使用CSS计数器之前，必须<a href="/en-US/docs/CSS/counter-reset" title="CSS/counter-reset">重置</a>一个值，默认是0。使用{{cssxref("counter()")}}函数来给元素增加计数器。 下面的CSS给每个h3元素的前面增加了 "Section <em><计算器值></em>:"。</p>
<pre class="brush: css">body {
counter-reset: section; /* 重置计数器成0 */
}
h3:before {
counter-increment: section; /* 增加计数器值 */
content: "Section " counter(section) ": "; /* 显示计数器 */
}
</pre>
<p>例如：</p>
<pre class="brush: html"><h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3></pre>
<p>{{ EmbedLiveSample('使用计数器', 300,200) }}</p>
<h2 id="计数器嵌套">计数器嵌套</h2>
<p>CSS计数器对创建有序列表特别有用，因为在子元素中会自动创建一个CSS计数器的实例。使用 <code>counters()</code> 函数，在不同级别的嵌套计数器之间可以插入字符串。比如这个CSS例子：</p>
<pre class="brush: css">ol {
counter-reset: section; /* 为每个ol元素创建新的计数器实例 */
list-style-type: none;
}
li:before {
counter-increment: section; /* 只增加计数器的当前实例 */
content: counters(section, ".") " "; /* 为所有计数器实例增加以“.”分隔的值 */
}
</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('计数器嵌套') }}</p>
<h2 id="Specifications" name="Specifications">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">注释</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}</td>
<td>{{Spec2("CSS3 Lists")}}</td>
<td>无变化</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>初始定义</td>
</tr>
</tbody>
</table>
<h2 id="See_also" name="See_also">其它</h2>
<ul>
<li><a href="/en-US/docs/CSS/counter-reset" title="CSS/counter-reset">counter-reset</a></li>
<li><a href="/en-US/docs/CSS/counter-increment" title="CSS/counter-increment">counter-increment</a></li>
</ul>
<p><em>另一个可用的示例在 <a class="external" href="http://www.mezzoblue.com/archives/2006/11/01/counter_intu/" rel="freelink">http://www.mezzoblue.com/archives/20.../counter_intu/</a>。这篇博客 发布于2006年11月1日，但是看上去写得还是准确的。</em></p>
<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div>
|
