分享人:徐炜
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.布局示例
6.扩展思考
7.参考文献
8.更多讨论
简而言之,计数器就是采用css给html元素自动生成编号。
在进行编码时,有时我们会有编号的需求,但使用ol和ul列表又无法达到我们需要的效果。
这时就会想,有没有什么办法,能像word的排序功能一样,可以对页面的元素进行自动编号。这种时候就轮到CSS计数器Counter出场了。
早期在CSS中除了列表ol、ul,没有其他标签允许元素自动进行排序。而在CSS2.1的规范中介绍了一种新属性:Counter,这种属性允许开发人员使用伪元素::after、::before给任何元素创建自动递增计数器。
使用CSS Counter给元素创建自动递增计数器不仅仅是依赖于某一个CSS属性来完成,他需要几个属性一起使用才会有效果。使用的到属性包括: counter-reset:顾名思意,就是“计数器-重置”的意思,主要用来重置起始数字,其值可以自定义,即从哪个数字开始计数,默认值为0。
counter-increment:顾名思意,就是“计数器-递增”的意思。用来标识计数器与实际相关联的范围。后面可以跟随数字,表示每次计数的变化值。
content:用来生成内容,主要配合counter()一起使用。counter():该函数用来设置插入计数器的值。
使用Counter来创建计数器,还需要对其属性的使用规则有一定的了解。接下来就先简单的了解一下这些属性。
语法规则:
counter-reset:[ <**identifier**> <**integer**> ]
取值说明:
counter-reset的默认值为none,其主要取值包括两个部分:
**identifier**:是计数器标识符,用来定义计数器的名称,这个名称可以自定义。后面可以紧跟一个整数值,中间用空格分隔开来,如name 0;
**integer**:即重置的数字,此值用来设置调用计算数器时起始值,默认值为0。
这里看上去难以理解,我们来看一个示例.
语法规则:
counter-increment:[ <**identifier**> <**integer**> ]
取值说明:
counter-increment的默认值为none。其值也包括两个部分:
**identifier**:是计数器标识符,用来定义计数器的名称,这个名称可以自定义。后面可以紧跟一个整数值,中间用空格分隔开来,如name 0;
**integer**:即递增(递减)的数字,其值允许是0或者负整数值,如果未指定任何值,则该值为1(前提是counter-reset未显式设置计数的起始值)。 其值递增(递减)是按倍数值递增(递减),如果设置了值为2,后面元素递增值为4、6、8,依此类推。
为加深理解,我们来看一个示例.
第一步:声明计数器:要使用CSS Counters生成自动计数器,首先就是通过counter-reset属性先声明一个计数器名称。
第二步:设置计数器:counter-reset只是定义了一个计数器标识符,在实际使用中,需要通过counter-increment属性来控制计数器的增减。
第三步:显示计数器:最后一步,就是如何显示计数器了。显示计数器需要通过:before、content和counter():来进行设置。
那我们来实际看一下演示示例。
只要把增量counter-increment为负数即可。
来看一下演示示例。
counter()的默认样式为decimal,即数字。我们可以根据需要修改成其他样式,例如:upper-roman(罗马数字)
来看一下演示示例。
counter计数器能和ol、ul同时使用吗?
http://www.css88.com/archives/6394
http://www.wozhuye.com/compatible/297.html
http://www.zhangxinxu.com/wordpress/2014/08/css-counters-automatic-number-content/
https://www.cnblogs.com/xiaohuochai/p/5018519.html
http://www.w3cplus.com/css3/css-counters.html
感谢大家观看
BY : 徐炜