有序列表结构设计

使用content属性，配合css计数器设计多层嵌套有序列表序号

代码：

    <ol><li>一级列表项目1<ol><li>二级列表项目1</li><li>二级列表项目2<ol><li>三级列表项目1</li><li>三级列表项目2</li></ol></li></ol></li><li>一级列表项目2</li></ol>
复制代码

效果：

    <style>ol{/* 清除默认序号 */list-style: none;}li:before{color:#f00;font-family: 'Times New Roman', Times, serif;}li{/* 设计递增函数a，递增起始值为1 */counter-increment: a 1;}li:before{/* 把递增值添加到列表项前面 */content: counter(a)".";}li li{/* 设计递增函数b，递增起始值为1 */counter-increment: b 1;}li li:before{/* 设计递增函数b，递增起始值为1 */content: counter(a)"."counter(b)".";}li li li{/* 设计递增函数b，递增起始值为1 */counter-increment: c 1;}li li li:before{/* 设计递增函数b，递增起始值为1 */content: counter(a)"."counter(b)"."counter(c)".";}</style>
复制代码

样式后的效果：