css content之counter-resetcontent-increment
Posted Canrz
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css content之counter-resetcontent-increment相关的知识，希望对你有一定的参考价值。
万万没想到，写了快三年前端，有不会用的css，居然还有完全没听过、见过的css属性，而且还是CSS2的内容！
关于counter-reset、content-increment两个属性的详解可以参看张鑫旭的博文：《CSS计数器(序列数字字符自动递增)详解》，这里做个记录，写个demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>content-increment</title> <style> .test li {margin:16px 0;padding:0;list-style:none;} .test li li:before{color:#f00;font-family:\'Microsoft YaHei\';} .counter1 li{counter-increment:testname;} .counter1 li:before{content:counter(testname)".";} .counter2 li{counter-increment:testname2 2;} .counter2 li:before{content:counter(testname2)"/";} .counter3 li{counter-increment:testname3 -1;} .counter3 li:before{content:counter(testname3)")";} .counter4 li{counter-increment:testname4;} .counter4 li:before{content:counter(testname4, upper-roman)". ";} .counter5 {counter-reset:testname5;} .counter5 li:before{content: counters(testname5, \'-\') \'. \'; counter-increment: testname5;color:blue;font-family: \'Microsoft YaHei\';} </style> </head> <body> <ul class="test"> <li class="counter1"> <strong>默认时的计数器：</strong> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> </li> <li class="counter2"> <strong>修改计数器每次增加的值为2：</strong> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> </li> <li class="counter3"> <strong>修改计数器每次增加的值为-1：</strong> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> </li> <li class="counter4"> <strong>修改计数器以罗马字符显示：</strong> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> </li> </ul> <ul class="test counter5"> <strong>计数器以嵌套计数显示:</strong> <li>父级</li> <li>父级 <ul class="counter5"> <li>子级1</li> <li>子级2</li> <li>子级3</li> </ul> </li> <li>父级 <ul class="counter5"> <li>子级1</li> <li>子级2</li> <li>子级3</li> </ul> </li> <li>父级</li> </ul> </body> </html>
兼容情况还不错：
以上是关于css content之counter-resetcontent-increment的主要内容，如果未能解决你的问题，请参考以下文章