css中计数器的实现-笔记

原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485533&idx=1&sn=e88dc5fffa60aeec13b341c1b90954dd&source=41#wechat_redirect

利用到的知识
伪类
counter-reset属性，设置增量起始
counter-increment属性，设置增量的数值
content属性计算增量
counter函数

代码格式如下，注意里面注释

<!--实现每个ul从1开始计数，显示数字-->
<!--每个li在ul里面从1开始计数-->
<ul class="box">标题1
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
<ul class="box">标题2
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
<ul class="box">标题3
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>

<style>

body {
/*名称随便起，但是要定义在你想计数容器的父容器上*/
counter-reset: startVal;
}

ul {
/*名称随便起*/
counter-reset: contentCounter;
}

/*利用css中的伪类*/
ul:before {
/*定义增量,第一个参数是开始数值，第二个参数是一次增加数量，可以是正数也可以是负数*/
counter-increment: startVal 3;
/*这里是计数函数，第一个参数是开始数值，第二个参数可选是显示样式，具体参数不罗列，智能提示有*/
content: '这里显示标题--' counter(startVal);
}

li:before {
counter-increment: contentCounter;
content: '内容列表--' counter(contentCounter);
}
</style>