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

强大魔力

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













需要注意的是,目前仅有firefox浏览较好的支持@counter-style。我依然把代码放到了codepen,请大家自由选择-在线研究-or-下载收藏-。

使用@counter-style命令,我们可以自定义列表样式,可以用在list-stylecountercounters等上。

结构解析

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

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

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

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

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

算法-system

命令 意义 可接受值 默认值
system 符号生成算法 cyclic 、 numeric 、 alphabetic 、 symbolic 、 additive 、 [fixed ?] 、 [ extends ] symbolic

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

参数 意义 示例代码 表现方式
cyclic 循环使用符号 system: cyclic; symbols:'a' 'b' 'c'; a,b,c,a,b,c,a
fixed 只用一遍符号,数字表示开始使用的位置 system: fixed 3; symbols:'a' 'b' 'c' 'd'; 1,2,a,b,c,d,7
symbolic 循环使用符号,第二遍双倍重复 system:symbolic; symbols:'a' 'b' 'c'; a,b,c,aa,bb,cc,aaa
alphabetic 类似于小写字母循环 system:alphabetic; symbols:'a' 'b' 'c'; a,b,c,aa,ab,ac,ba
numeric 类似于数字进制 system:alphabetic; symbols:'a' 'b' 'c'; b,c,c,ba,bb,bc,ca,cb
additive 类似于罗马数字的编号系统 system:additive; additive-symbols: c 3, b 2, a 1; a,b,c,ca,cb,cc,cca
extends 继承其他编号系统 system: extends decimal; suffix: ') '; 1),2),3),4),5),6),7)

使用范围-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

CSS Counter Style试玩儿的更多相关文章

  1. [Coding Style] CSS coding style

    CSS coding style Note 结合实际工作中的规范和推荐大家使用的CSS书写规范.顺序这篇文章整合而成 Navigation CSS 书写顺序 CSS 常用文件命名 CSS 常用命名规范 ...

  2. how to overwrite css !important style

    how to overwrite css !important style css !important bug how to override css !important style https: ...

  3. CSS变量试玩儿

    CSS很美妙,能够为您的页面穿上衣裳,各种各样五彩斑斓的衣裳,但是对于开发者来说,他又不够灵动,于是乎有了各种各样的预处理器Sass.LESS.Stylus(笔者建议Sass的SCSS语法),这些预处 ...

  4. CSS counter计数器(content目录序号自动递增)详解

    一.CSS计数器三角关系 CSS计数器只能跟content属性在一起的时候才有作用,而content属性貌似专门用在before/after伪元素上的.于是,就有了,“计数器↔伪元素↔content属 ...

  5. CSS( Cascading Style Sheets )简书

    (注:带*号的属性是CSS3新增属性)一.基本规则1.css通常存储在样式表(style)中,用于定义如何显示HTML元素:2.css主要由两个部分构成:选择器和一条或多条声明. 选择器通常是需要改变 ...

  6. CSS Transform Style

    As CSS3 developing quickly, the transform style can be written conviently. I find that it is an inte ...

  7. css counter的使用方法

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. CSS(Cascading Style Shee)

    1.CSS是Cascading Style Sheet这个几个英文单词的缩写,翻译成中文是“层叠样式表”的意思 CSS能让网页制作者有效的定制.改善网页的效果. CSS是对HTML的补充,网页设计师曾 ...

  9. vue - 绑定css、style

    1.绑定html css1.1对象语法: 传给 v-bind:class 一个对象,以动态地切换 class <div v-bind:class="{ active: isActive ...

随机推荐

  1. 【ORACLE】oracle打补丁

    -- 备份旧的opatch cd $ORACLE_HOME/ mv OPatch  OPatch_20180323_old -- 上传补丁工具和补丁包到oraclehome目录下,解压 unzip p ...

  2. 【转】Spring Boot干货系列:(一)优雅的入门篇

    转自Spring Boot干货系列:(一)优雅的入门篇 前言 Spring一直是很火的一个开源框架,在过去的一段时间里,Spring Boot在社区中热度一直很高,所以决定花时间来了解和学习,为自己做 ...

  3. Reflux系列01:异步操作经验小结

    写在前面 在实际项目中,应用往往充斥着大量的异步操作,如ajax请求,定时器等.一旦应用涉及异步操作,代码便会变得复杂起来.在flux体系中,让人困惑的往往有几点: 异步操作应该在actions还是s ...

  4. Js_Eval方法

    定义和用法eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法eval(string) 其中参数string为必需.是要计算的字符串,其中含有要计算的 JavaScr ...

  5. Java并发编程(详解wait(), notify(),sleep())

    http://blog.csdn.net/luckyzhoustar/article/details/48179161

  6. LeetCode 606. Construct String from Binary Tree根据二叉树创建字符串 (C++)

    题目: You need to construct a string consists of parenthesis and integers from a binary tree with the ...

  7. linux第十八章学习笔记

    第十八章 调试 内核级开发的调试工作远比用户级开发艰难,它带来的风险比用户级别更高. 一.准备开始 1. 准备工作需要: 一个bug 一个藏匿bug的内核版本 相关内核代码的知识和运气 2. 在用户级 ...

  8. Linux内核分析——第五周学习笔记

    第五周 扒开系统调用的“三层皮”(下) 一.知识点总结 (一)给MenuOS增加time和time-asm命令 在实验楼中,首先 强制删除menu (rm menu -rf) 重新克隆一个新版本的me ...

  9. Jmeter使用笔记之组件的作用域

    以前一直使用loadrunner,最近入职新公司后需要使用jmeter,这里把使用过程中出现的一些问题进行总结,同时会和自己使用loadrunner的情况相比较,以后也会不断总结,GO! 一.组件的作 ...

  10. Mac OS X使用简介

    一.OS X 版本以大型猫科动物命名 10.0   猎豹(Cheetah) 10.1   美洲狮(Puma) 10.2   美洲虎(Jaguar) 10.3   黑豹(Panther) 10.4   ...