CSS里的Counter

counter 美 [ˈkaʊntɚ] 计数器

简述

counter和css里的width、color一样是一个属性，但是单独使用counter是没有效果的，就像你买了一个鼠标，如果没有cpu、硬盘、内存条……的话，这个鼠标好像并没有什么用。
counter的小伙伴是

• ::before or ::after (不熟悉的同仁可以先看看css伪类)
• counter-reset
• counter-increment
• counters

本文不赘述css伪类而把重点放在counter、counters、counter-reset、counter-increment这四个属性上，并默认读者熟悉css伪类的用法。

应用场景

一个例子

css计数器的应用，在于，需要类似有序列表一样的功能，但是不想（或者不能）使用有序列表的时候。实际上css计数器的功能比有序列表的功能更强大一些。 比如下面图片里的例子

我们明明可以用有序列表很简单地做出来，1分钟都不要。但是我们为什么要用counter？实际上，如果仅仅做成上图的效果，确实用有序列表就够了。
但是实际开发中，如此“简洁”的情况还是少见的，我们可能需要为购物车里的商品列表添加序号，或者自己做了个todoList也需要序号，而且还可以定义这个序号的样式。

最开始，我想，直接把序号放在html里不就行了？但是这样做的缺点是如果购物车删除了某个商品，那么被删除的商品的序号就没了。比如我们删除了上图的“饼干”，那么“1巧克力”下面就是“3酸奶”，这是我们不想看到的。

当然，在js里维护index值也是可以的，但是可以先看看counter怎么做。

.container{
    counter-reset: abc;
}
.item::before{
    counter-increment