CSS Counter Style试玩儿

2015年2月3日，CSS Counter Style level3成为了W3C的候选标准，是时候来一探究竟，。进来一坐，且听庆哥分解。

强大魔力

使用CSS Counter Style可以做什么，来看看庆哥做的简单案例。当然，如果要发挥最大魔力，需要您的美好创意，这不是哥的特长，就不献丑了，欢迎各位通过留言提交您的创意。需要注意的是，。我依然把代码放到了codepen，请大家自由选择-在线研究-or-下载收藏-。，我们可以自定义列表样式，可以用在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 : 语音策略;}

，大部分情况下，我们只需要使用其中几个命令即可，例如实现“天干编号”的命令如下。

@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下的含义如下列表所示：

• 在cyclic、numeric、fixed算法下，auto表示从负无穷到正无穷
• 在alphabetic、symbolic算法下，auto表示从1到正无穷
• additive算法下，auto表示从0到正无穷
• extend算法下，auto取继承的父系统的取值范围，如果为预定义的复杂系统，取预定义的取值

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

/*指定范围为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

致谢

前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助。本文原文链接，http://blog.csdn.net/whqet/article/details/43605725欢迎大家访问独立博客http://whqet.github.io