CSS Counter Style试玩儿_html/css_WEB-ITnose

2015年2月3日，css counter style level3成为了w3c的候选标准，是时候来一探究竟， 看看强大魔力的 at counter-style如何自定义list-style和counter 。进来一坐，且听庆哥分解。

强大魔力

使用CSS Counter Style可以做什么，来看看庆哥做的简单案例。当然，如果要发挥最大魔力，需要您的美好创意，这不是哥的特长，就不献丑了，欢迎各位通过留言提交您的创意。






需要注意的是， 目前仅有firefox浏览较好的支持 at counter-style 。我依然把代码放到了codepen，请大家自由选择-在线研究-or-下载收藏-。
使用 at counter-style命令 ，我们可以自定义列表样式，可以用在list-style、counter、counters等上。

结构解析

定义一个counter-style的典型格式如下：

@counter-style counter名字{	 system  : 算法;	 range   : 使用范围;	 symbols : 符号; or additive-symbols: 符号	 prefix  : 前缀;	 suffix  : 后缀;	 pad     : 补零(eg. 01,02,03);	 negative: 负数策略;	 fallback: 出错后的默认值;	 speakas : 语音策略;}

上面详细列出了 at counter-style的所有命令 ，大部分情况下，我们只需要使用其中几个命令即可，例如实现“天干编号”的命令如下。

@counter-style cjk-heavenly-stem {  system: alphabetic;  symbols: "\7532" "\4E59" "\4E19" "\4E01" "\620A" "\5DF1" "\5E9A" "\8F9B" "\58EC" "\7678";  /* 甲 乙 丙 丁 戊 己 庚 辛 壬 癸 */  suffix: "、";}

接下来我们来简要看看各个命令的用法。

立即学习“前端免费学习笔记（深入）”；

算法-system

算法详细解释如下表所说。

使用范围-range

指定自定义符号系统的使用范围，超出范围外的将采用fallback指定的默认编号。
可以使用[ [ | infinite ]{2} ]或 auto两种形式指定range范围，auto为默认值。
auto在不同system下的含义如下列表所示：

短影AI

长视频一键生成精彩短视频

下载

下面的示例都是正确的范围指定。

/*指定范围为auto，默认值*/range: auto;/*指定范围为两个数字：前面表示下限，后面表示上限，两个数字都包含在内,列表之间用逗号隔开*/range: 1 6;range: 1 2,4 6;/*指定范围为关键字*/range: infinite;   /*从负无穷到正无穷*/range: infinite 4; /*从负无穷到4*/range: -6 infinite;/*从-6到正无穷*/

使用符号-symbols和additive-symbols

这是自定义counter-style中非常重要的属性，在 cyclic、numeric、alphabetic、symbolic、fixed等算法中必须指定symbols属性，在additive算法中必须指定additive-symbols。

使用前后缀-prefix和suffix

prefix的默认自为“ ”，suffix的默认值为"\2E\20"，一个点加一个空格。
###使用补零策略-pad
pad可以让开发者指定固定宽度的符号系统，例如三位的数字系统，001, 002，……，100, 101等。
pad指定的格式为 pad && ，例如 pad 3 "0"等。

匿名counter-style-symbols()函数

symblos函数将创建一个没有名字，prefix为""，suffix为" "，range为auto，fallback为decimal，negative为"\2d"（-）， pad为0 ""，speak-as为auto的匿名style。也即我们只需要在匿名counter-style中指定system和symbols即可。

ol { list-style: symbols(cyclic "a" "b" "c" "d"); }

预定义style

CSS Counter Styles Level 3预定了很多不错的符号系统，例如针对中国用户的天干、地支、中文数字、中文大写等符号系统。这些预定义的系统，使我们学习counter-style的不错资源，下面我们就来看几个。

/*两位数字编号-01,02,03……10,11*/@counter-style decimal-leading-zero {  system: extends decimal;  pad: 2 '0';}/*中文数字编号*/@counter-style cjk-decimal {  system: numeric;  range: 0 infinite;  symbols: \3007  \4E00  \4E8C  \4E09  \56DB  \4E94  \516D  \4E03  \516B  \4E5D;  /* ? 一 二 三 四 五 六 七 八 九 */  suffix: "\3001";  /* "、" */}/*天干编号*/@counter-style cjk-heavenly-stem {  system: alphabetic;  symbols: "\7532" "\4E59" "\4E19" "\4E01" "\620A" "\5DF1" "\5E9A" "\8F9B" "\58EC" "\7678";  /* 甲 乙 丙 丁 戊 己 庚 辛 壬 癸 */  suffix: "、";}/*地支编号*/@counter-style cjk-earthly-branch {  system: alphabetic;  symbols: "\5B50" "\4E11" "\5BC5" "\536F" "\8FB0" "\5DF3" "\5348" "\672A" "\7533" "\9149" "\620C" "\4EA5";  /* 子 丑 寅 卯 辰 巳 午 未 申 酉 戌 亥 */  suffix: "、";}/*中文大写编号-壹仟壹佰壹拾壹*/@counter-style simp-chinese-formal {/* this is a predefined complex style in the CSS3 Counter Styles specification */system: additive;range: -9999 9999;additive-symbols: 9000 \7396\4EDF, 8000 \634c\4EDF, 7000 \67d2\4EDF, 6000 \9646\4EDF, 5000 \4f0d\4EDF, 4000 \8086\4EDF, 3000 \53C1\4EDF, 2000 \8CB3\4EDF, 1000 \58F9\4EDF, 900 \7396\4F70, 800 \634C\4F70, 700 \67D2\4F70, 600 \9646\4F70, 500 \4f0d\4F70, 400 \56DB\4F70, 300 \53C1\4F70, 200 \8CB3\4F70, 100 \58F9\4F70, 90 \7396\62FE, 80 \634C\62FE, 70 \67D2\62FE, 60 \9646\62FE, 50 \4f0d\62FE, 40 \8086\62FE, 30 \53C1\62FE, 20 \8CB3\62FE, 10 \58F9\62FE, 9 \7396, 8 \634C, 7 \67D2, 6 \9646, 5 \4f0d, 4 \8086, 3 \53C1, 2 \8CB3, 1 \58F9, 0 \96F6;suffix:'、 ';negative: "\8D1F";}

相关阅读

w3c 候选标准
Predefined Counter Styles

致谢