很多时候要是实现一行文字前面的序列号的话，可能会直接添加个新元素或者利用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>
详情可查看这篇文章