CSS有序列表编号格式问题：实现1.0、1.1、1.11层级编号

云上老周

2026-8-1

解决有序列表层级编号格式问题

问题原因

HTML结构不规范：<ol>的直接子元素只能是<li>，当前把内层<ol>放在外层<li>之外，导致层级关系混乱。
CSS计数器逻辑错误：使用统一的item计数器配合counters()会自动串联所有层级编号，无法实现需求的“1.0 →1.1 →1.11”格式；同时第三层的counter-reset设置不符合预期。

修正后的代码

HTML代码

<ol class="level-1">
    <li>Test Level 1
        <ol class="level-2">
            <li>Test Level 2
                <ol class="level-3">
                    <li>Test Level 3</li>
                    <li>Test Level 4</li>
                    <li>&nbsp;</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

CSS代码

/* 隐藏默认列表编号 */
ol {
    list-style: none;
}

/* 第一层列表：编号格式 数字.0 */
ol.level-1 {
    counter-reset: level1;
}
ol.level-1 > li {
    position: relative;
    padding-left: 3em;
}
ol.level-1 > li:before {
    content: counter(level1) ".0";
    counter-increment: level1;
    position: absolute;
    left: 0;
}

/* 第二层列表：编号格式 父级数字.当前数字 */
ol.level-2 {
    counter-reset: level2;
}
ol.level-2 > li {
    position: relative;
    padding-left: 3em;
}
ol.level-2 > li:before {
    content: counter(level1) "." counter(level2);
    counter-increment: level2;
    position: absolute;
    left: 0;
}

/* 第三层列表：编号格式 父级编号+当前数字（如1.1→1.11） */
ol.level-3 {
    counter-reset: level3;
}
ol.level-3 > li {
    position: relative;
    padding-left: 3.5em;
}
ol.level-3 > li:before {
    content: counter(level1) "." counter(level2) counter(level3);
    counter-increment: level3;
    position: absolute;
    left: 0;
}