HTML CSS在实现嵌套排序（包括数字、字母和罗马数字）时遇到的问题

我需要实现一个嵌套的有序结构化html页面，非常类似这样。大部分部分都完成了，但我在数字排序中被卡在了1位。请建议。 下面是所需的结构和我的代码

1.Main Line 111111111 
    1.1 Sub Line 111111111 
        a.aaaaaaaaaaa
        b.bbbbbbbbbbb

2.Main Line 22222222
    2.1 Sub Line 111111111 
        a.aaaaaaaaaaa
        b.bbbbbbbbbbb   
    2.2 Sub Line 22222222 
        a.aaaaaaaaaaa 
            i.moreeeeee
            ii.moreeeeee
        b.bbbbbbbbbbb 
            i.moreeeeee
            ii.moreeeeee

但得到一些重叠的数字，如图所示： 请告诉我哪里做错了

在我的代码中：

ol{
计数器重置：项目；
}
ol>li{
反增量：项目；
}
.sub num list>li:之前{
内容：计数器（项目“.”）；
左边距：-20px；
}
.sub num list>ol>li:之前{
内容：计数器（项目“.”）；
左边距：-20px；
}
.sub-albhabical list>li{
列表样式类型：低alpha；
左边距：20px；
}
.sub-roman list>li{
列表样式类型：下罗马；
左边距：20px；
}

正线111111
第111111分线
AAAAAAAAAAAA
bbbbbbbbbbbb


主线22222
第111111分线
AAAAAAAAAAAA
bbbbbbbbbbbb

第2222分线
AAAAAAAAAAAA
莫雷伊
莫雷伊

bbbbbbbbbbbb
莫雷伊
莫雷伊


第111111分线
AAAAAAAAAAAA
bbbbbbbbbbbb

只需在样式部分添加此样式

.sub-num-list{
  list-style-type: none;
}

---

它将删除重叠的数字

您在使用

：before

和list

计数器

CSS属性时出错。此外，您可能会迷失在CSS选择器中，并最终得到不想要的效果

我帮你修好了，希望这就是你想要的

li{
显示：块
}
.main num list、.sub num list{
计数器重置：项目
}
.main num list>li:之前，
.sub num list>li:之前{
内容：计数器（项目“.”）；
反增量：项目
}
.次级资产负债表{
计数器复位：字母；
}
.sub-albhabical list>li:之前{
内容：计数器（字母，小写字母）”；
反增量：字母；
}
1.亚罗马名单{
计数器复位：罗马；
}
.sub-roman list>li:之前{
内容：计数器（小写罗马字母）“.”；
反增量：罗马；
}

正线111111
第111111分线
AAAAAAAAAAAA
bbbbbbbbbbbb


主线22222
第111111分线
AAAAAAAAAAAA
bbbbbbbbbbbb

第2222分线
AAAAAAAAAAAA
莫雷伊
莫雷伊

bbbbbbbbbbbb
莫雷伊
莫雷伊


第111111分线
AAAAAAAAAAAA
bbbbbbbbbbbb

您使用的是

ol

，因此，默认情况下，它会添加一个数字。您可以使用

.sub num list{list style:none；}