有序列表结构设计

有序列表结构设计

使用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>
复制代码

效果：

css样式

    <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>
复制代码

样式后的效果：