CSS计数器(序列数字字符自动递增)详解

CSS计数器不是什么新鲜玩意了，早在10年春暖花开的时候，我写的“CSS content内容生成技术以及应用”一文就要提到（见下图），不过当时是作为其中一员介绍。就像例行的溜新同事一样，虽然黑如焦炭的我在自我介绍的时候给新同事留下了深刻印象，但由于介绍的同事茫茫多，我只是其中一员。很自然，个把月之后，我就会被无情的淡忘，除了那依稀的面庞，因为毕竟长得还算比较抽象。

然而，CSS计数器的斗量显然不是短短几句介绍能够显露的，所谓人不可貌相。就像我，说不定某年某月，当年像驴子一样被溜的新同事终于脑袋被门夹了，想起了我的音容笑貌，找我来寻求帮助呢！

我最近就遇到这样的情况。

给部门同事做点果汁系统的时候，由于果汁店经常会有水果因果品爆发被N多靓妹相中而缺货，因此，每人可以选择三种自由搭配的饮品。于是，就有了第1选择、第2选择、第3选择……

本来我是纯文字写在标签里的。好重好累，感觉不会再爱了！此时，突然眼前一道白光，午休时间结束，阿姨把办公室的灯打开了。这恍如隔世的念闪让我突然想起了当年大明湖畔的“CSS计数器”。想当年，移动web还是草莽，IE六七兴风作浪。这诱人的技能就算昭告于世也是受制于兼容大环境而腰斩的命。

但是现在不一样了，我们赶上了一个更好的时代：英语老师从事传统工业生产锤子，影视明星舍身取义集体赴监狱拍摄大片；以前那些受制于IE6/IE7不兼容而不见天日的高级CSS/JS特性也纷纷走到了台前，CSS计数器就是其中一员。于是，我拿起我平时钓鱼挖蚯蚓的小锹去挖CSS计数器的坟。虽然目前网上已有一些介绍CSS计数器的文章，但大多不够全面，案例不够精彩，查阅也不方便。就像是租的房子，虽然也能挡风遮雨，但装修风格不是自己的，还寄人篱下，保不准房东借个东风就把我吹走了。所以啊，有必要自己留一手，去挖个坟然后建个房。

对于纯洁的技术圈而言，挖坟并不可耻。我们重新去挖掘过去的那些文章知识，好像一个考古学家去挖掘尘封的历史、消失的文明一般，是件很有价值的事情。所以，如果大家对挖掘考古感兴趣，就跟我一起去挖挖挖~~

CSS计数器只能跟content属性在一起的时候才有作用，而content属性貌似专门用在before/after伪元素上的。于是，就有了，“计数器↔伪元素↔content属性”的铁三角关系。

CSS计数就跟我们军训报数一样的！现在，让我们的静静地闭上眼睛，让思绪飞到青葱的大学，那个炎热的夏日，那个宽广的军训场地，你…想到了什么？——“隔壁班的那个妹子长得好水灵好可爱我好喜欢”。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！