CSS中的ol
属性是用来控制有序列表的样式的。下面介绍几个常用的属性:
ol { list-style-type: decimal; list-style-position: inside; counter-reset: section; counter-increment: section; }
list-style-type
可以设置有序列表的编号风格,常用的有:
- decimal:1, 2, 3...
- lower-roman:i, ii, iii...
- upper-roman:I, II, III...
- lower-alpha:a, b, c...
- upper-alpha:A, B, C...
list-style-position
可以设置编号的位置,常用的有:
- inside:编号在列表项内部
- outside:编号在列表项外部
counter-reset
和counter-increment
是用来设置计数器的,常用于制作标题样式。先通过counter-reset
设置计数器名字和初值,再通过counter-increment
进行递增。例如:
h2:before { counter-reset: section; } h3:before { counter-increment: section; content: counter(section)". "; }
上面的代码会在每个h3标题前加一个有序编号,编号从1开始。其中content: counter(section)". ";
是用来设置计数器的显示样式,". "表示编号后面跟一个空格。