ol自定义序号样式的方法

ol为有序列表元素,它的默认样式在前面会自动添加序号如1.、2.、3.等,本文介绍如何通过css及html5新增属性改变需要的样式以及编号规则等。

一、编号倒序(HTML5新增)
reversed属性可以指定编号为倒序:

  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四项

二、指定编号起始值(HTML5新增)
start属性可以指定编号的初始值:

  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四项

三、指定编号位置(内、外)
css属性list-style-position:inside;可以指定编号的位置,下面的列表的编号为inside(默认为outside),可以与上面两个例子对比一下,对齐方式有所不同。

  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四项

四、自定义编号的值

<style>
ol.example{counter-reset: num;}
ol.example li{counter-increment: num; list-style:none;}
ol.example li::before{content: '第' counter(num) '条:';}
</style>

五、自定义编号增量

<style>
ol.example{counter-reset: num;}
ol.example li{counter-increment: num 2; list-style:none;}
ol.example li::before{content: '第' counter(num) '条:';}
</style>

六、自定义编号初始值
下面的例子中example的第一个li为12,后面依次是14、16、18,counter-reset和counter-increment两个属性的第二个值也可以为负值

counter-reset属性第二个值的默认值为0,表示初始值为0;counter-increment属性第二个值的默认值为1,表示增量为1。

<style>
ol.example{counter-reset: num 10;}
ol.example li{counter-increment: num 2; list-style:none;}
ol.example li::before{content: '第' counter(num) '条:';}
</style>