CSS黑魔法之计数器counter的使用技巧CSS计数器counter()的用法简介CSS计数器(序列数字字符自动递增)详解

计数器(counter)，“老一辈”程序员估计对这个东西印象深刻，早期的网站页面上经常会有这个东西，如今这种特征都变成了笑话。CSS里自己实现了一种计数器，很简单，很直接。使用CSS计数器，你可以实现简单的纯CSS的计数功能，并能将其显示到页面上。下面我们简单的看一下CSS计数器是如何使用的！

初始化CSS计数器

为了好理解，我们使用

和
1. 元素来做演示。首先我们要重置计数器，让它归零，并给它指定一个名称：
   CSS Code复制内容到剪贴板

   1. ol.slides {   
   2.  countercounter-reset: slideNum;   
   3. }  

   这个计数器叫slideNum，下面的例子都都要使用它。

   CSS计数器的自增

   为了是计数器能够自增，我们需要使用counter-increment，并把计数器的名称跟到后面：

   CSS Code复制内容到剪贴板

   1. ol.slides > li {   
   2.  countercounter-increment: slideNum;   
   3. }  

   这样，在CSS选择器下，每遇到一个符合条件li元素，counter-increment就会被调用一次，计数就是增加1。需要注意的是，这里的CSS选择器里使用了>符号，这样是为了滤掉有可能多重嵌套的li元素。否者你的计数值就会不是你想要的。

   使用计数值

   如果只计数而无法显示，那这个计数器也没多大用处，所以就有了counter()命令来输出计数器里的值，可以用在content属性里：

   CSS Code复制内容到剪贴板

   1. ol.slides li:after {   
   2.  content: "[" counter(slideNum) "]";   
   3. }  

   有趣的是，这个counter()命令还可以接受第二个参数，当作同时计算多个元素时数据的分隔符：

   假设有这样的HTML:

   XML/HTML Code复制内容到剪贴板

   1. <ol class="toc">  
   2.  <li>Introli>  
   3.  <li>Topic   
   4.   <ol>  
   5.    <li>Subtopicli>  
   6.    <li>Subtopicli>  
   7.    <li>Subtopicli>  
   8.   ol>  
   9.  li>  
   10.  <li>Topic   
   11.   <ol>  
   12.    <li>Subtopicli>  
   13.    <li>Subtopicli>  
   14.    <li>Subtopicli>  
   15.   ol>  
   16.  li>  
   17.  <li>Closingli>     
   18. ol>  

   我们这样来写：

   CSS Code复制内容到剪贴板

   1. ol.toc, ol.toc ol {   
   2.  countercounter-reset: toc;   
   3. }   
   4. ol li {   
   5.  countercounter-increment: toc;   
   6. }   
   7. .toc li:before {   
   8.  content: "(Item " counters(toc, ".") ")";   
   9. }  

   会输出下面的结果

   XML/HTML Code复制内容到剪贴板

   1. <ol class="toc">  
   2.  <li>(Item 1)Introli>  
   3.  <li>(Item 2)Topic   
   4.   <ol>  
   5.    <li>(Item 2.1)Subtopicli>  
   6.    <li>(Item 2.2)Subtopicli>  
   7.    <li>(Item 2.3)Subtopicli>  
   8.   ol>  
   9.  li>  
   10.  <li>(Item 3)Topic   
   11.   <ol>  
   12.    <提示： 本文由神整理自网络，如有侵权请联系本站删除！
       本站声明：
       1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
       2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

       上一篇：通过CSS3的object-fit来调整图片适配尺寸的技巧简介浅谈CSS中的 object-fit 与 object-position的使用

       下一篇：CSS3媒体查询Media Queries基础学习教程CSS3中媒体查询结合rem布局适配手机屏幕纯js和CSS3媒体查询制作简单的响应式导航菜单特效源码详解CSS3 Media Queries中媒体属性的使用 使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法CSS3媒体查询(Media Queries)介绍css3 响应式媒体查询的示例代码

   相关内容

   • 通过CSS3的object-fit来调整图片适配尺寸的技巧简介浅谈CSS中的 object-fit 与 object-position的使用
   • CSS3中currentColor关键字的妙用
   • 魔幻般冒泡背景的CSS3按钮动画CSS3鼠标滑过图片效果 用Font Awesome库实现悬停图标基于CSS3实现鼠标滑过图片上移代码纯CSS3实现鼠标滑过按钮动画第二节
   • 你值得拥有的CSS下拉菜单效果纯CSS实现下拉菜单的示例代码CSS3模拟动画下拉菜单效果CSS导航栏及弹窗示例代码CSS下拉菜单简单制作教程 css制作黑色经典导航下拉菜单基于CSS实现的4级下拉菜单效果代码CSS实现的灰色下拉菜单效果代码纯CSS实现的大型下拉菜单的示例代码
   • 天天酷跑3月2日版全自动刷分高效无异常脚本方法_手机游戏_游戏攻略_
   • 天天酷跑1.0.1.0叉叉助手刷分刷钻无异常版下载及使用攻略分享_手机游戏_游戏攻略_
   • 天天酷跑紫焰哈雷 霸气双形态外观展示_手机游戏_游戏攻略_
   • 极致酷炫霸气十足 紫焰哈雷今日火爆上线_手机游戏_游戏攻略_
   • 天天酷跑大神的标志 天天酷跑胜场图标详细介绍_手机游戏_游戏攻略_
   • 全民飞机大战刷金币刷分2月28日最新辅助教程推荐_手机游戏_游戏攻略_