嵌套的有序列表显示数字前缀

希望实现父级ol的数字前缀为1.、2.、3.等，子级为1.1、1.2、1.3等，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌套有序列表</title>
    <style>
        /* 设置父级 ol */
        ol {
            counter-reset: main-counter; /* 重置父级计数器 */
        }

        ol > li {
            list-style-type: none; /* 去掉默认的编号样式 */
            counter-increment: main-counter; /* 父级计数器递增 */
        }

        ol > li::before {
            content: counter(main-counter) ". "; /* 显示父级计数器 */
        }

        /* 设置嵌套的 ol */
        ol ol {
            counter-reset: sub-counter; /* 重置嵌套的子级计数器 */
        }

        ol ol > li {
            list-style-type: none; /* 去掉嵌套列表的默认编号 */
            counter-increment: sub-counter; /* 子级计数器递增 */
        }

        ol ol > li::before {
            content: counter(main-counter) "." counter(sub-counter) ". "; /* 显示父级+子级计数器 */
        }
    </style>
</head>
<body>

<ol>
    <li>第一项
        <ol>
            <li>子项 1.1</li>
            <li>子项 1.2</li>
        </ol>
    </li>
    <li>第二项
        <ol>
            <li>子项 2.1</li>
            <li>子项 2.2</li>
        </ol>
    </li>
</ol>

</body>
</html>

嵌套的有序列表显示数字前缀

相关文章：