结合::before实现自定义列表
body { counter-reset:dnf; } div::before { content:counter(dnf) "."; counter-increment:dnf; }<body> <div>dnf</div> <div>dnf</div> <div>dnf</div> <div>dnf</div></body>(1)counter-reset:dnf会在解析到相应元素执行,body只有一个,所以只执行一次重置、定义dnf计数器,默认0,可以指定默认值counter-reset:dnf 10;可以定义多个计数器counter-reset:dnf 10 lol;
(2)
content:counter(dnf) ".";//1counter-increment:dnf; //2无论2语句在1前面还是在1后面都会优先执行,默认每次增长1,可自己指定counter-increment:dnf 2;1语句默认显示数字,还可以是其他list-style-type属性支持的任意值content:counter(dnf,lower-alpha) ".";小写英文字母a,b,c,d