首页 > 代码库 > css计数器
css计数器
很多时候要是实现一行文字前面的序列号的话,可能会直接添加个新元素或者利用before伪元素实现。但如果是多行文字的序列号的话,就不是那么简单了。
恰好,css就有这么个计数器可以实现这个功能。
counter-reset:进行计数器的重置。
counter-increment:进行计数器的递增或递减。
counter():输出计数器。
就以上三个属性。但使用起来可不是这么简单:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ /*counter-reset: dd tt;*/ /*进行计数器的递增,可同时设置两个计数器*/ counter-increment: dd tt; } div:before,div:after{ /*counter-increment: dd tt;*/ display: inline-block; width: 20px; height: 20px; margin: 5px; line-height: 20px; color: #fff; text-align: center; border-radius: 100%; background-color: #f00; } div:before{ /*显示计数器*/ content: counter(dd) } div:after{ content: counter(tt); } </style> </head> <body> <div>text</div> <div>text</div> <div>text</div> <div>text</div> <div>text</div> </body> </html>
以上的是同一级的计数器,没嵌套。
以下的是有三级的嵌套:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .reset{ padding-left: 20px; counter-reset: num; } .counter{ color: #666; } .counter:before{ counter-increment: num; content: counters(num,‘-‘); font-family: arial black; } </style> </head> <body> <div class="reset"> <div class="counter"> 第一级 <div class="reset"> <div class="counter">第二级</div> <div class="counter">第二级 <div class="reset"> <div class="counter">第三级</div> <div class="counter">第三级</div> <div class="counter">第三级</div> </div> </div> <div class="counter">第二级</div> <div class="counter">第二级 <div class="reset"> <div class="counter">第三级</div> <div class="counter">第三级</div> <div class="counter">第三级</div> </div> </div> </div> </div> </div> </body> </html>
详情可查看这篇文章
css计数器
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。