css計數器
阿新 • • 發佈：2017-06-08
顯示 for 利用 round hang set char get ref
很多時候要是實現一行文字前面的序列號的話，可能會直接添加個新元素或者利用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計數器