总字数 907
预计阅读时间 4 分钟
有序列表
HTML具备原生支持的计数器功能,也就是有序列表<ol>
1 | <ol class="normal"> |
对于有序列表来说,可以去指定list-style-type
来使用预置的序列,比如字母、罗马数字等,默认是decimal(数字)
也可以给::marker
伪元素指定样式
1 | ol.roman { |
实际效果如下
这样的有序列表有一定的局限性
- 不能指定起始值,每个
<ol>
当中的<li>
都是从1开始的 - 不能指定步长,一定是每次递增1
CSS计数器
如果需要对序列的控制更灵活一些,可以使用CSS计数器
1 | <div class="container"> |
1 | .container { |
效果如下
counter-reset
代表在这个层级重置指定计数器的值,默认置为0。可以指定多个例如counter-reset: counter1 0 counter2 10
无论在何处,只要有它,对应的计数器的值都会重置,所以通常会将它给到列表的父元素counter-increment
代表计数器增加,默认增加1。与counter-reset类似也可以指定多个
无论在何处,只要有它,对应的计数器的值都会增加,所以通常会将它给到列表的子元素counter
函数指定使用该计数器,可以用于伪元素的content,它相当于是执行输出
这个函数可以有2个参数counter(name,style)
,style就是跟list-style-type一样,可以指定不同的序号风格
嵌套计数
实际使用当中我们可以用计数器生成目录树结构
可能需要有多个层级
但是如果层级数量是不确定的,基本的计数器就无法满足了,这种情况下就需要用到嵌套计数
1 | <div class="reset"> |
1 | .reset { |
效果如下
与基本计数器的区别就在于使用counters
函数,形式为counters(name, string, style)
name和style与基本计数器中的含义相同,string为拼接使用的字符串
其他特性
如果其中存在使用display:none
隐藏掉元素,则计数器的值不会增加
实际显示的序列仍然是正确的
如果使用visibility:hidden
隐藏,计数器的值会增加
这一点与有序列表是一样的