使用CSS计数器就像使用变量一样。
它有以下几个属性：
counter-reset 创建或重置计数器
counter-increment 增长计数器
content 生成内容
counter() 将计数器的值添加到元素中
使用CSS计数器，我们必须首先创建它。
dome1
效果：
不过得注意一下，必须用伪元素来生产内容，不然不起效果。
这样简单的说一下原理，就是它有多少个元素添加了counter-increment:list;这个它就可以加1。
不相信的话我们可以再来看个东西，可以说明它不是按照元素的，而是根据counter-increment，如果它的值是一样的就可以增加。
有了这个属性，如果需要这种效果就不要去写JS了。
如果你觉得你会了，那就错了，其实还有很多坑，来看一个复杂点的。
这个好像没有什么问题对吧，但我为什么要给body加呢？其实有原因的，再来看这个counter-reset，它表示创建或重置计数器，那么就有问题了，什么情况下它表示创建，什么情况下它表示重置？
以我的观察是，当第一次使用counter-reset就表示创建，第二次表示重置，但要注意是同一个元素才会重置。body一个页面只有一个，所有对于只需要增加而不需要重置的计数器就可以写去body里面，当然也可以写去其他元素里面，只要保证它是唯一的，当然这句话不是100%正确，不好描述，自己试试就懂了。
看最后一个例子。
这个你能理解，就差不多了，不能就自己多试几次，也没啥。
2016.09.22更新
这几天在项目中都有用到这个技术，确实挺好用的，另外再讲几个小技巧。
利用计数器来实现获取input checked选择的数量。
怎么样，还可以吧？
其实我们还可以自己手动更改counter-increment的数值大小，比如下面这个。
其代码是这个
CSS：
body{ counter-reset:num; } input:nth-of-type(1):checked{ counter-increment:num 5; } input:nth-of-type(2):checked{ counter-increment:num 2; } input:nth-of-type(3):checked{ counter-increment:num 7; } input:nth-of-type(4):checked{ counter-increment:num 1; } div::after{ content:'Count ' counter(num); }
HTML:
5 2 7 1
通过这个可以很好的实现下面的这种效果。
注意除了后面的文字左边的间距是一样的。
我的实现方式是这样的。
HTML：
- 会员特权
- 每个在线商品均可享受成本价特惠购买，每个商品可享受5~200元不等的优惠力度
- 分享所有商品项目链接给朋友，朋友也可以享受优惠1~40元不等的优惠
- 更多特权敬请期待
CSS：
dl{ margin:0 1.2rem; } dl>dt{ border-bottom:1px solid #dedede; } dl:first-of-type{ margin-top:20px; } .list{ counter-reset:list; } .list>dd{ line-height:2; counter-increment:list; font-family:sans-serif; padding-left:1.2rem; position:relative; color:#999; } .list>dd::before{ content:counter(list) '. '; position:absolute; left:0; top:0; }
OK。
2016.09.25更新
最近发现counter还支持传递一个值用来改变显示的序号如下。
代码：
body,div{ margin:0; padding:0; } ul{ list-style:none; counter-reset:a; } li{ counter-increment: a; } li::before{ content:counter(a,cjk-ideographic) ' '; }
- CSS
- Javascript
- HTML5
这里用了“cjk-ideographic”它会按照大小数字来显示。
那么这个值哪里来的呢？它就是“list-style-type”里面的值，更多你可以去找这里面的。还可以按照a，b，c的顺序，这个也比较常用。
