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

互联网
已经是深秋了，森林里那一望无际的林木都已光秃，让褐色的苔掩住它身上的皱纹。无情的秋天剥下了它们美丽的衣裳，它们只好枯秃地站在那里。

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

初始化CSS计数器

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

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.slidesli:after{
  2. content:"["counter(slideNum)"]";
  3. }

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

假设有这样的HTML:

XML/HTML Code复制内容到剪贴板
  1. <olclass="toc">
  2. <li>Intro</li>
  3. <li>Topic
  4. <ol>
  5. <li>Subtopic</li>
  6. <li>Subtopic</li>
  7. <li>Subtopic</li>
  8. </ol>
  9. </li>
  10. <li>Topic
  11. <ol>
  12. <li>Subtopic</li>
  13. <li>Subtopic</li>
  14. <li>Subtopic</li>
  15. </ol>
  16. </li>
  17. <li>Closing</li>
  18. </ol>

我们这样来写：

CSS Code复制内容到剪贴板
  1. ol.toc,ol.tocol{
  2. countercounter-reset:toc;
  3. }
  4. olli{
  5. countercounter-increment:toc;
  6. }
  7. .tocli:before{
  8. content:"(Item"counters(toc,".")")";
  9. }

会输出下面的结果

XML/HTML Code复制内容到剪贴板
  1. <olclass="toc">
  2. <li>(Item1)Intro</li>
  3. <li>(Item2)Topic
  4. <ol>
  5. <li>(Item2.1)Subtopic</li>
  6. <li>(Item2.2)Subtopic</li>
  7. <li>(Item2.3)Subtopic</li>
  8. </ol>
  9. </li>
  10. <li>(Item3)Topic
  11. <ol>
  12. <li>(Item3.1)Subtopic</li>
  13. <li>(Item3.2)Subtopic</li>
  14. <li>(Item3.3)Subtopic</li>
  15. </ol>
  16. </li>
  17. <li>(Item4)Closing</li>
  18. </ol>

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

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

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

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

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

CSS Code复制内容到剪贴板
  1. <divclass="languages">
  2. <inputid="c"type="checkbox"><labelfor="c">C</label>
  3. <inputid="C++"type="checkbox"><labelfor="C++">C++</label>
  4. <inputid="C#"type="checkbox"><labelfor="C#">C#</label>
  5. <inputid="Java"type="checkbox"><labelfor="Java">Java</label>
  6. <inputid="JavaScript"type="checkbox"><labelfor="JavaScript">JavaScript</label>
  7. <inputid="PHP"type="checkbox"><labelfor="PHP">PHP</label>
  8. <inputid="Python"type="checkbox"><labelfor="Python">Python</label>
  9. <inputid="Ruby"type="checkbox"><labelfor="Ruby">Ruby</label>
  10. </div>
  11. <pclass="total">
  12. Totalselected:
  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. <divclass="numbers">
  2. <inputid="one"type="checkbox"><labelfor="one">1</label>
  3. <inputid="two"type="checkbox"><labelfor="two">2</label>
  4. <inputid="three"type="checkbox"><labelfor="three">3</label>
  5. <inputid="four"type="checkbox"><labelfor="four">4</label>
  6. <inputid="five"type="checkbox"><labelfor="five">5</label>
  7. <inputid="one-hundred"type="checkbox"><labelfor="one-hundred">100</label>
  8. </div>
  9. <pclass="sum">
  10. Sum
  11. </p>
  12. .numbers{
  13. countercounter-reset:sum;
  14. }
  16. #one:checked{countercounter-increment:sum1;}
  17. #two:checked{countercounter-increment:sum2;}
  18. #three:checked{countercounter-increment:sum3;}
  19. #four:checked{countercounter-increment:sum4;}
  20. #five:checked{countercounter-increment:sum5;}
  21. #one-hundred:checked{countercounter-increment:sum100;}
  23. .sum::after{
  24. content:'='counter(sum);
  25. }

到此这篇关于CSS黑魔法之计数器counter的如何使用技巧就介绍到这了。我不能说我不珍重这些荣誉，并且我承认它很有价值，不过我却从来不曾为追求这些荣誉而工作。更多相关CSS黑魔法之计数器counter的如何使用技巧内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

您可能有感兴趣的文章
CSS中的line-height行高属性的如何使用技巧小结
CSS中行高line-height属性的一些如何使用技巧
css line-height属性的如何使用技巧
CSS背景图坐标定位详解及负数的如何使用技巧
Firebug 调试器Web开发者应掌握12个初级如何使用技巧