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)". ";
是用來設置計數器的顯示樣式,". "表示編號后面跟一個空格。