大家好，我是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