CSS计数器

使用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<input type="checkbox">
2<input type="checkbox">
7<input type="checkbox">
1<input type="checkbox">
<div></div>

通过这个可以很好的实现下面的这种效果。

注意除了后面的文字左边的间距是一样的。

我的实现方式是这样的。

HTML：

<dl class="list">
　　<dt class="title">会员特权</dt>
　　<dd>每个在线商品均可享受成本价特惠购买，每个商品可享受5~200元不等的优惠力度</dd>
　　<dd>分享所有商品项目链接给朋友，朋友也可以享受优惠1~40元不等的优惠</dd>
　　<dd>更多特权敬请期待</dd>
</dl>

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还支持传递一个值用来改变显示的序号如下。

代码：

<style>
body,div{
　　margin:0;
　　padding:0;
}
ul{
　　list-style:none;
　　counter-reset:a;
}
li{
　　counter-increment: a;
}
li::before{
　　content:counter(a,cjk-ideographic) ' ';
}

</style>

<ul>
　　<li>CSS</li>
　　<li>Javascript</li>
　　<li>HTML5</li>
</ul>

这里用了“cjk-ideographic”它会按照大小数字来显示。

那么这个值哪里来的呢？它就是“list-style-type”里面的值，更多你可以去找这里面的。还可以按照a，b，c的顺序，这个也比较常用。