blob: 379db61b69ceba94d3959c6e5d4b69f3eac5f151 (
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
---
title: counter-increment
slug: Web/CSS/counter-increment
translation_of: Web/CSS/counter-increment
---
<div>{{CSSRef}}</div>
<h2 id="Summary" name="Summary">概要</h2>
<p><code>counter-increment</code>属性用于将<a href="/en-US/docs/CSS_Counters" title="CSS_Counters">CSS Counters</a>的值增加给定值。可以使用 {{cssxref("counter-reset")}} 属性重置计数器的值。</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre class="brush:css">/* Increment counter-name by 1 */
counter-increment: counter-name;
/* Decrement counter-name by 1 */
counter-increment: counter-name -1;
/* Increment counter1 by 1, and decrement counter2 by 4 */
counter-increment: counter 1 counter2 -4;
/* Do not increment/decrement anything: used to hide less specific values */
counter-increment: none;
/* Global values */
counter-increment: inherit;
counter-increment: initial;
counter-increment: unset;
</pre>
<h3 id="Values" name="Values">可选值</h3>
<dl>
<dt>{{cssxref("custom-ident", "<custom-ident>")}}</dt>
<dd>递增的计数器的名称。该标识符由不区分大小写的字母a到z，数字0到9，下划线（_）和/或短划线（ - ）的组合组成。第一个非破折号字符必须是一个字母（即，在它的开头没有数字，即使前面有破折号。）此外，在标识符的开头禁止使用两个破折号。在任何案例组合中都不能是none，unset，initial或inherit。</dd>
<dt>{{cssxref("<integer>")}}</dt>
<dd>计数器的值。如果没有给出，默认为1。</dd>
<dt><code>none</code></dt>
<dd>不得增加计数器。用作默认值，或取消更具体规则的增量。</dd>
</dl>
<p>你可以根据需要指定要递增的计数器，每个计数器用空格分隔。</p>
<h3 id="语法形式">语法形式</h3>
<pre class="syntaxbox">{{csssyntax}}
</pre>
<h2 id="Examples" name="Examples">示例</h2>
<pre class="brush: css">h1 {
counter-increment: chapter section 2 page;
/* Increases the value of the chapter and page counters by 1
and the section counter by 2. */
}
</pre>
<h2 id="Specifications" name="Specifications">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Lists', '#counter-increment', 'counter-increment') }}</td>
<td>{{ Spec2('CSS3 Lists') }}</td>
<td>No change.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'generate.html#propdef-counter-increment', 'counter-increment')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>2.0</td>
<td>1.0 (?)</td>
<td>8.0</td>
<td>9.2</td>
<td>3.0 (?)</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also" name="See_also">参考</h2>
<ul>
<li><a href="/en-US/docs/CSS/Counters" title="CSS Counters">CSS Counters</a>, {{Cssxref("counter-reset")}}</li>
</ul>
|
