--- 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="/zh-CN/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="/zh-CN/docs/Web/CSS/counter#counter-style"><counter-style></a><a href="/zh-CN/docs/CSS/Value_definition_syntax#Question_mark_()" title="Question mark: the entity is optional">?</a> ) where <code><counter-style> = <a href="/zh-CN/docs/Web/CSS/counter#counter-style-name"><counter-style-name></a> <a href="/zh-CN/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="/zh-CN/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>