本文主要是介绍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-r
这篇关于CSS里的Counter的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!