有序列表結構設計

有序列表結構設計

使用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>
複製代碼

樣式後的效果：