--- title: CSS Counter Styles slug: Web/CSS/CSS_Counter_Styles tags: - CSS - CSS计数 translation_of: Web/CSS/CSS_Counter_Styles --- <div>{{cssref}}</div> <p><strong>CSS 计数器样式</strong> is是一个让你自定义计数器样式的CSS模块.</p> <h2 id="参考">参考</h2> <h3 id="属性">属性</h3> <div class="index"> <ul> <li>{{cssxref("counter-increment")}}</li> <li>{{cssxref("counter-reset")}}</li> </ul> </div> <h3 id="At-rules">At-rules</h3> <dl> <dt>{{cssxref("@counter-style")}}</dt> <dd> <div class="index"> <ul> <li>{{cssxref("@counter-style/system","system")}}</li> <li>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</li> <li>{{cssxref("@counter-style/negative", "negative")}}</li> <li>{{cssxref("@counter-style/prefix", "prefix")}}</li> <li>{{cssxref("@counter-style/suffix", "suffix")}}</li> <li>{{cssxref("@counter-style/range", "range")}}</li> <li>{{cssxref("@counter-style/pad", "pad")}}</li> <li>{{cssxref("@counter-style/speak-as", "speak-as")}}</li> <li>{{cssxref("@counter-style/fallback", "fallback")}}</li> </ul> </div> </dd> </dl> <h2 id="Specifications" name="Specifications">指南</h2> <dl> <dt><a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">使用CSS计数器</a></dt> <dd>描述如何使用计数器来给HTML元素计数,或者执行复杂的计数</dd> </dl> <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')}}</td> <td>{{Spec2('CSS3 Counter Styles')}}</td> <td>初始化定义.</td> </tr> </tbody> </table> <h2 id="浏览器兼容性">浏览器兼容性</h2> <h3><code>@counter-style</code> rule</h3> {{Compat("css.at-rules.counter-style")}} <h3><code>counter-increment</code> property</h3> {{Compat("css.properties.counter-increment")}} <h3><code>counter-reset</code> property</h3> {{Compat("css.properties.counter-reset")}}