---
title: '@counter-style'
slug: Web/CSS/@counter-style
translation_of: Web/CSS/@counter-style
---
<p>{{ CSSRef() }}</p>

<h2 id="概要">概要</h2>

<p><code>@counter-style是一个</code> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> ，它让开发者可以自定义counter的样式。 一个 <code>@counter-style规则</code> 定义了如何把一个计数器的值转化为字符串表示。</p>

<p>最初版的CSS定义了一系列很好用的计数器样式， 尽管近几年又添加了很多样式，但是这种限制方式被证明已经不能满足全球化的排版了。<code>@counter-style规则用一种开放的方式弥补了这一缺点，在预定义的样式不能满足需求时，它可以使开发者自定义他们自己的计数器样式。</code></p>

<h2 id="Syntax" name="Syntax">语法</h2>

<pre class="syntaxbox">@counter-style &lt;counter-style-name&gt; {
    system: &lt;counter system&gt;
    symbols: &lt;counter symbols&gt;
    additive-symbols: &lt;additive-symbols&gt;
    negative: &lt;negative symbol&gt;
    prefix: &lt;prefix&gt;
    suffix: &lt;suffix&gt;
    range: &lt;range&gt;
    pad: &lt;padding&gt;
    speak-as: &lt;speak-as&gt;
    fallback: &lt;counter-style-name&gt;
}
</pre>

<h3 id="描述">描述</h3>

<p> </p>

<p>每个 <code>@counter-style</code> 由一个名称标识并具有一组描述符</p>

<dl>
 <dt>{{cssxref("system")}}</dt>
 <dd>指定一个算法，用于将计数器的整数值转化为字符串表示。</dd>
</dl>

<dl>
 <dt>{{cssxref("negative")}}</dt>
 <dd>指定一个符号，当计数器表示的值为负的时候，把这个符号加在值的前面或后面</dd>
</dl>

<dl>
 <dt>{{cssxref("prefix")}}</dt>
 <dd>指定一个符号，加在标记表示符的前面。前缀在最后阶段才会被加上，所以在计数器的最终表示中，它在{{cssxref("negative")}}前。</dd>
</dl>

<dl>
 <dt>{{cssxref("suffix")}}</dt>
 <dd>与{{cssxref("prefix")}}类似，suffix指定一个符号，加在标记表示符的后面。</dd>
</dl>

<dl>
 <dt>{{cssxref("range")}}</dt>
 <dd> 指定一个counter-style生效的范围，如果计数器的值不再这个范围内，那么自定义的counter-style不会生效，counter-style会后退到{{cssxref("fallback")}}的style。</dd>
</dl>

<dl>
 <dt>{{cssxref("pad")}}</dt>
 <dd>在你想要给标记表示符最小值时使用。比如说，你想要计数器从01开始，经过02，03，04，那么这时可以使用pad了。对于大于pad指定值的表示符，标记会恢复为normal。</dd>
</dl>

<dl>
 <dt>{{cssxref("fallback")}}</dt>
 <dd>定义一个备用的系统，当自定义的系统不能使用或者计数器的值超过了定义的范围时使用。如果备用系统也不能表示计数器的值，那么备用系统的备用系统（如果有的话）将会启用。如果没有指定备用系统，或者备用系统链不能够正确表示一个值，那么最终会降为十进制样式表示。</dd>
</dl>

<dl>
 <dt>{{cssxref("symbols-descriptor", "symbols")}}</dt>
 <dd>定义一个符号，用于标记的表示。符号可以包含字符串，图片或自定义的识别码。这个符号怎样构建标记呢？这依赖于system描述符里面所定义的算法。 举个例子，如果system的值是fixed,那么symbols属性指定的固定的N个符号，将被用来表示计数器的前N个值。用完了前N个符号后，列表里剩下的值将使用fallback定义的样式来表示。<br>
 <br>
 下面的@counter-style规则使用图片而不是字符标记。<br>

 <pre class="brush: css">@counter-style winners-list {
  system: fixed;
  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
  suffix: " ";
}</pre>
 </dd>
</dl>

<dl>
 <dt>{{cssxref("additive-symbols")}}</dt>
 <dd>尽管symbols属性中指定的符号可以被system中定义的大部分算法所使用，但是一些system属性的值，比如additive，依赖于本描述符所描述的加性元组。Each additive tuple consists of a counter symbol and a non negative integer weight. 每个加性元组包含一个可数的符号和一个非负证书的权重。The additive tuples must be specified in the descending order of their weights.</dd>
</dl>

<dl>
 <dt>{{cssxref("speak-as")}}</dt>
 <dd>定义如何在语音识别器中读出计数器样式，比如屏幕阅读器。例如基于该描述符的值，标记符号的值可以作为有序列表的数字或者字幕作为无序列表的音频提示读出。</dd>
</dl>

<h2 id="例子">例子</h2>

<pre class="brush: css">@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}</pre>

<p>上面的counter style规则在列表中可以如下使用：</p>

<pre class="brush: css">.items {
   list-style: circled-alpha;
}
</pre>

<p>会产生如下列表：</p>

<p>Ⓐ One<br>
 Ⓑ Two<br>
 Ⓒ Three<br>
 Ⓓ Four<br>
 Ⓔ FIve<br>
 ....<br>
 ...<br>
 Ⓨ Twenty Five<br>
 Ⓩ Twenty Six</p>

<p>27 Twenty Seven<br>
 28 Twenty Eight<br>
 29 Twenty Nine<br>
 30 Thirty</p>

<p>查看更多例子 <a href="https://mdn.github.io/css-counter-style-demo/">demo page</a>.</p>

<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 Counter Styles', '#the-counter-style-rule', 'counter-style')}}</td>
   <td>{{Spec2('CSS3 Counter Styles')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器支持">浏览器支持</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</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop(33)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</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 Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop(33)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="相关阅读">相关阅读</h2>

<ul>
 <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
 <li>{{cssxref("symbols", "symbols()")}}, the functional notation creating anonymous counter styles.</li>
</ul>