Html 自定义有序列表中的CSS计数器

我想创建两个有序（相互独立）的HTML列表，它们具有以下格式并从数字开始，如下所示：

2.1 2.2 2.3 2.4 2.1.1 2.1.2 2.2.1 2.2.2 2.2.3 2.3.1 2.3.2 2.4.1 2.4.2 2.1 2.2 2.3 2.4 2.1.1 2.1.2 2.2.1 2.2.2 2.2.3 2.3.1 2.3.2 2.4.1 2.4.2 如何使用CSS实现这一点

任何帮助都将不胜感激，因为我已经用尽了这里的资源试图解决这个问题

谢谢

试试这个

ol{
计数器复位：第一级；
列表样式类型：无；
}
李：以前{
显示：内联块；
内容：计数器（第一级）；
计数器增量：第一级；
宽度：2米；
左边距：-2米；
}
ol ol{
计数器复位：二级；
}
奥利：以前{
内容：计数器（第一级）“.”计数器（第二级）；
反增量：二级；
}
醇醇{
计数器复位：第三级；
}
奥利：以前{
内容：计数器（一级）“计数器（二级）”计数器（三级）；
反增量：第三级；
文本缩进：-5px；
}

主要1
主1的子1
主1的子1的子1
主1的子1的子1

主1的子2
主1的子2的子1
主1的子2的子2

主要2
主2的子1
主2的子1的子1
主2的子1的子2

主2的子2
主2的子2的子1
主2的子2的子2
主2的子2的子3

您已经试过什么了吗？向我们展示您的工作，例如使用。我使用悬挂缩进对齐上面提到的手动输入列表编号后的文本，但我正在寻找连续编号的自动方法..悬挂缩进{左填充：44px；文本缩进：-44px；}

2.1.1诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类

您可以使用

计数器重置

和

李：之前

如我在答案中所示。谢谢，这对我来说是一个好的开始，因为我正在努力理解计数器是如何复位的。然而，我不想要一个主关卡。我的列表级别的开始在第一个级别是2.1.1，而不是第二个级别。你能进一步帮助我吗？好的，这是小提琴的链接