文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS计数器counter的使用技巧

2024-04-02 19:55

关注

这篇文章主要介绍“CSS计数器counter的使用技巧”,在日常操作中,相信很多人在CSS计数器counter的使用技巧问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS计数器counter的使用技巧”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

初始化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.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>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.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)Intro</li>  

  3.  <li>(Item 2)Topic   

  4.   <ol>  

  5.    <li>(Item 2.1)Subtopic</li>  

  6.    <li>(Item 2.2)Subtopic</li>  

  7.    <li>(Item 2.3)Subtopic</li>  

  8.   </ol>  

  9.  </li>  

  10.  <li>(Item 3)Topic   

  11.   <ol>  

  12.    <li>(Item 3.1)Subtopic</li>  

  13.    <li>(Item 3.2)Subtopic</li>  

  14.    <li>(Item 3.3)Subtopic</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计数器counter的使用技巧

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

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. }   

CSS计数器counter的使用技巧

到此,关于“CSS计数器counter的使用技巧”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯