序号 html ol自动缩进,ol自定义序号样式的方法

一、编号倒序(HTML5新增)

reversed属性可以指定编号为倒序：

第一项

第二项

第三项

第四项

二、指定编号起始值(HTML5新增)

start属性可以指定编号的初始值：

第一项

第二项

第三项

第四项

三、指定编号位置(内、外)

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

第一项

第二项

第三项

第四项

四、自定义编号的值

ol.example{counter-reset: num;}

ol.example li{counter-increment: num; list-style:none;}

ol.example li::before{content: '第' counter(num) '条:';}

五、自定义编号增量

ol.example{counter-reset: num;}

ol.example li{counter-increment: num 2; list-style:none;}

ol.example li::before{content: '第' counter(num) '条:';}

六、自定义编号初始值

下面的例子中example的第一个li为12，后面依次是14、16、18，counter-reset和counter-increment两个属性的第二个值也可以为负值

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

ol.example{counter-reset: num 10;}

ol.example li{counter-increment: num 2; list-style:none;}

ol.example li::before{content: '第' counter(num) '条:';}