大家好,我是IT修真院深圳分院第09期学员,一枚正直善良的web程序员。
今天给大家分享一下,修真院官网 CSS-08任务中可能会使用到的知识点:
1.背景介绍
如何使用css中的计数器?
简而言之,计数器就是采用css给html元素自动生成编号。我们在进行编码时,有时我们会有编号的需求,但使用ol和ul列表又无法达到我们需要的效果。这时就会想,有没有什么办法,能像word的排序功能一样,可以对页面的元素进行自动编号。这种时候就轮到CSS计数器Counter出场了。
2.知识剖析
(1)计数器的基本概念
早期在CSS中除了列表ol、ul,没有其他标签允许元素自动进行排序。而在CSS2.1的规范中介绍了一种新属性:Counter,这种属性允许开发人员使用伪元素::after、::before给任何元素创建自动递增计数器。(2)计数器的构成
使用CSS Counter给元素创建自动递增计数器不仅仅是依赖于某一个CSS属性来完成,他需要几个属性一起使用才会有效果。使用的到属性包括: counter-reset:顾名思意,就是“计数器-重置”的意思,主要用来重置起始数字,其值可以自定义,即从哪个数字开始计数,默认值为0。counter-increment:顾名思意,就是“计数器-递增”的意思。用来标识计数器与实际相关联的范围。后面可以跟随数字,表示每次计数的变化值。
content:用来生成内容,主要配合counter()一起使用。counter():该函数用来设置插入计数器的值。
使用Counter来创建计数器,还需要对其属性的使用规则有一定的了解。接下来就先简单的了解一下这些属性。
1>.COUNTER-RESET
语法规则:
counter-reset:[ <**identifier**> <**integer**> ]
取值说明:
counter-reset的默认值为none,其主要取值包括两个部分:
**identifier**:是计数器标识符,用来定义计数器的名称,这个名称可以自定义。后面可以紧跟一个整数值,中间用空格分隔开来,如name 0;
**integer**:即重置的数字,此值用来设置调用计算数器时起始值,默认值为0。
2>. COUNTER-INCREMENT语法规则:
counter-increment:[ <**identifier**> <**integer**> ]
取值说明:
counter-increment的默认值为none。其值也包括两个部分:
**identifier**:是计数器标识符,用来定义计数器的名称,这个名称可以自定义。后面可以紧跟一个整数值,中间用空格分隔开来,如name 0;
**integer**:即递增(递减)的数字,其值允许是0或者负整数值,如果未指定任何值,则该值为1(前提是counter-reset未显式设置计数的起始值)。 其值递增(递减)是按倍数值递增(递减),如果设置了值为2,后面元素递增值为4、6、8,依此类推。
3>.创建计数器的步骤
第一步:声明计数器:要使用CSS Counters生成自动计数器,首先就是通过counter-reset属性先声明一个计数器名称。
第二步:设置计数器:counter-reset只是定义了一个计数器标识符,在实际使用中,需要通过counter-increment属性来控制计数器的增减。
第三步:显示计数器:最后一步,就是如何显示计数器了。显示计数器需要通过:before、content和counter():来进行设置。
3.常见问题
(1)怎么让计数器倒序计数?只要把增量counter-increment为负数即可。
(2)怎么改变计数器的计数符号?
counter()的默认样式为decimal,即数字。
我们可以根据需要修改成其他样式,例如:upper-roman(罗马数字)
4.解决方案
参考视频
5.代码实战
6.拓展思考
counter计数器能和ol、ul同时使用吗?
counter计数器可以和ol、ul同时使用,符合起来还能达成复合序号的效果,详细使用情况参考视频。
7.参考文献
参考一: CSS计数器(counter)入门:http://www.css88.com/archives/6394;
参考二: CSS的计数器:counter-increment与counter-reset:http://www.wozhuye.com/compatible/297.html;
参考二: CSS counter计数器(content目录序号自动递增)详解:http://www.zhangxinxu.com/wordpress/2014/08/css-counters-automatic-number-content/;
参考三: 深入理解CSS计数器:https://www.cnblogs.com/xiaohuochai/p/5018519.html
参考四:CSS Counters:http://www.w3cplus.com/css3/css-counters.html。
8.更多讨论
问题一:计数器浏览器兼容情况怎么样?
1、目前主流浏览器基本都支持counter-reset属性。
注意: 因为在IE6 和IE7 以及IE8的IE7兼容模式中,:before 和:after 都不被支持,所以可以认为它们都不支持content 属性,测试也就毫无意义,所以这个列表将IE6、IE7和IE8的IE7兼容模式忽略。IE8只有指定!DOCTYPE才支持counter-reset属性。。
问题二:CSS计数器除了用来计数还有什么其他的作用?
除了生成篇数、章节和段落以外,CSS计数器还被应用于计算数据类型的小游戏当中。
问题三:CSS计数器与display:none的使用会造成什么影响?
一个元素,如果设置了counter-increment, 但是其display的属性值是none或者含有hidden属性(针对支持浏览器),则此计数值是不会增加的。而visibility:hidden以及其他声明不会有此现象。
今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~
有兴趣学习编程的同学可以参考我的每天总结,互相学习,共同进步
http://www.jnshu.com/login/1/21055279