主页 / 建站知识 /

CSS黑魔法之计数器counter的使用技巧

建站知识 2021-07-03 08:15www.168986.cn长沙网站建设

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

初始化CSS计数器

为了好理解，我们使用<OL> 和 <LI> 元素来做演示。我们要重置计数器，让它归零，并给它指定一个名称

CSS Code复制内容到剪贴板
  1. ol.slides {   
  2.  countercounter-reset: slideNum;   
  3. }  

这个计数器叫slideNum，狼蚁网站SEO优化的例子都都要使用它。

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>Intro</li>  
  3.  <li>Topic   
  4.   <ol>  
  5.    <li>Subic</li>  
  6.    <li>Subic</li>  
  7.    <li>Subic</li>  
  8.   </ol>  
  9.  </li>  
  10.  <li>Topic   
  11.   <ol>  
  12.    <li>Subic</li>  
  13.    <li>Subic</li>  
  14.    <li>Subic</li>  
  15.   </ol>  
  16.  </li>  
  17.  <li>Closing</li>     
  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. }  

会输出狼蚁网站SEO优化的结果

XML/HTML Code复制内容到剪贴板
  1. <ol class="toc">  
  2.  <li>(Item 1)Intro</li>  
  3.  <li>(Item 2)Topic   
  4.   <ol>  
  5.    <li>(Item 2.1)Subic</li>  
  6.    <li>(Item 2.2)Subic</li>  
  7.    <li>(Item 2.3)Subic</li>  
  8.   </ol>  
  9.  </li>  
  10.  <li>(Item 3)Topic   
  11.   <ol>  
  12.    <li>(Item 3.1)Subic</li>  
  13.    <li>(Item 3.2)Subic</li>  
  14.    <li>(Item 3.3)Subic</li>  
  15.   </ol>  
  16.  </li>  
  17.  <li>(Item 4)Closing</li>     
  18. </ol>  

你可以发现，当需要显示这种联级嵌套序号时，这种技术是非常的有用的。很像微软WORD里面文档的多重序号。

在 counter-reset 属性中，定义了一个随机 ID，其默认值是0。你可以在 counter-increment 属性中定义一个数字，作为计数的步长。

例如counter-increment: i 2 将值显示偶数。

大多时候，CSS计数器都是配合:after和:before伪元素使用，我曾看到过有人在幻灯片、视频页面和文档里用过CSS计数器。相信你会找到其它可以使用它的地方。

CSS 计数器进阶
利用 CSS 计数器，能统计被用户选择的复选框个数

CSS Code复制内容到剪贴板
  1. <div class="languages">     
  2.   <input id="c" type="checkbox"><label for="c">C</label>   
  3.   <input id="C++" type="checkbox"><label for="C++">C++</label>   
  4.   <input id="C#" type="checkbox"><label for="C#">C#</label>   
  5.   <input id="Java" type="checkbox"><label for="Java">Java</label>   
  6.   <input id="JavaScript" type="checkbox"><label for="JavaScript">JavaScript</label>   
  7.   <input id="PHP" type="checkbox"><label for="PHP">PHP</label>   
  8.   <input id="Python" type="checkbox"><label for="Python">Python</label>   
  9.   <input id="Ruby" type="checkbox"><label for="Ruby">Ruby</label>   
  10. </div>     
  11. <p class="total">     
  12.   Total selected:   
  13. </p>     
  14. .languages {   
  15.   countercounter-reset: characters;   
  16. }   
  17. input:checked {     
  18.   countercounter-increment: characters;   
  19. }   
  20. .total:after {   
  21.   content: counter(characters);   
  22. }   

在这个示例中，我们会增加 input:checked 的数量并打印出来。

你还能创建一个小型计算器

CSS Code复制内容到剪贴板
  1. <div class="numbers">     
  2.   <input id="one" type="checkbox"><label for="one">1</label>   
  3.   <input id="two" type="checkbox"><label for="two">2</label>   
  4.   <input id="three" type="checkbox"><label for="three">3</label>   
  5.   <input id="four" type="checkbox"><label for="four">4</label>   
  6.   <input id="five" type="checkbox"><label for="five">5</label>   
  7.   <input id="one-hundred" type="checkbox"><label for="one-hundred">100</label>   
  8. </div>     
  9. <p class="sum">     
  10.   Sum    
  11. </p>    
  12. .numbers {   
  13.   countercounter-reset: sum;   
  14. }   
  15.   
  16. #one:checked { countercounter-increment: sum 1; }   
  17. #two:checked { countercounter-increment: sum 2; }   
  18. #three:checked { countercounter-increment: sum 3; }   
  19. #four:checked { countercounter-increment: sum 4; }   
  20. #five:checked { countercounter-increment: sum 5; }   
  21. #one-hundred:checked { countercounter-increment: sum 100; }   
  22.   
  23. .sum::after {   
  24.   content: '= ' counter(sum);   
  25. }   

上一篇：CSS3媒体查询Media Queries基础学习教程 下一篇：通过CSS3的object-fit来调整图片适配尺寸的技巧简介

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by