计数器样式 | @counter-style (Counter Styles) - CSS 中文开发手册 - Break易站

??CSS 中文开发手册

计数器样式 | @counter-style (Counter Styles) - CSS 中文开发手册

@counter-style是一个CSSat-rule?，它让开发者可以自定义counter的样式。 一个?@counter-style规则?定义了如何把一个计数器的值转化为字符串表示。

@counter-style thumbs {
  system: cyclic;
  symbols: "F44D";
  suffix: " ";
}

ul {
   list-style: thumbs;
}

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

语法

描述

每个?@counter-style?由一个名称标识并具有一组描述符。

system指定一个算法，用于将计数器的整数值转化为字符串表示。

negative指定一个符号，当计数器表示的值为负的时候，把这个符号加在值的前面或后面

prefix指定一个符号，加在标记表示符的前面。前缀在最后阶段才会被加上，所以在计数器的最终表示中，它在negative前。

suffix与prefix类似，suffix指定一个符号，加在标记表示符的后面。

range?指定一个counter-style生效的范围，如果计数器的值不再这个范围内，那么自定义的counter-style不会生效，counter-style会后退到fallback的style。

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

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

symbols定义一个符号，用于标记的表示。符号可以包含字符串，图片或自定义的识别码。这个符号怎样构建标记呢？这依赖于system描述符里面所定义的算法。?举个例子，如果system的值是fixed,那么symbols属性指定的固定的N个符号，将被用来表示计数器的前N个值。用完了前N个符号后，列表里剩下的值将使用fallback定义的样式来表示。