计数器这个属性可以用来自动排版段落,段落样式种类很多且支持自定义。
1.counter-reset:定义计数器,包括初始值,作用域等,display: none时失效.用法:counter-reset: counterName1 0 counterName2 0 ...
2.counter-increment:设置计数器的增数,用法:counter-increment(counterName) | counter-increment(counterName, step)[step可以为负数]
3.counter():调用计数器。在CSS2.1中counter()只能被使用在content属性上counter(counterName) | counter(counterName, list-style-type) 。list-style-type: 种类很多可以试试,例如:罗马字,希腊符号,希腊字母,大小写数字,天干地支等 。
4.元素display: none的元素不参与计数,使用visibility:hidden参与计数5.@counter-style: 可以自定义counter的类型,有兴趣的同学可以试试
使用步骤:
设置计数器名称和初始值: counter-reset
设置增数,可以是负数: counter-increment
调用计数器并设置样式: counter()
源代码:
效果图:
github链接:https://github.com/JoeSmile/CSS-Test中的cssBasic3.html