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

Question

我想创建两个有序（相互独立）的HTML列表，这些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

如何使用CSS执行此操作？

任何帮助都会受到赞赏，因为我已经耗尽了资源，试图解决这个问题。

谢谢！

Answer 1

试试这个

ol {
  counter-reset: firststlevel; 
  list-style-type: none;
}
li:before {
  display: inline-block;
  content: counter(firststlevel);
  counter-increment: firststlevel;
  width: 2em;
  margin-left: -2em;
}
ol ol {
  counter-reset: secondlevel;
}
ol ol li:before{
  content:counter(firststlevel) "."counter(secondlevel);
  counter-increment: secondlevel;
}

ol ol ol {
   counter-reset: thirdlevel;
}
ol ol ol li:before{
  content:counter(firststlevel) "."counter(secondlevel)"."counter(thirdlevel);
  counter-increment: thirdlevel;
  text-indent:-5px;
}

<ol>
    <li>Main 1</li>
    <ol>
        <li>Child 1 of Main 1
        <ol>
            <li>Sub Child 1 of Child 1 of Main 1</li>
            <li>Sub Child 1 of Child 1 of Main 1</li>
        </ol>
        </li>
        <li>Child 2 of Main 1
             <ol>
            <li>Sub Child 1 of Child 2 of Main 1</li>
            <li>Sub Child 2 of Child 2 of Main 1</li>
        </ol>
        </li>
    </ol>
    <li>Main 2</li>
    <ol>
        <li>Child 1 of Main 2
            <ol>
            <li>Sub Child 1 of Child 1 of Main 2</li>
            <li>Sub Child 2 of Child 1 of Main 2</li>
        </ol>
        </li>
        <li>Child 2 of Main 2
             <ol>
            <li>Sub Child 1 of Child 2 of Main 2</li>
            <li>Sub Child 2 of Child 2 of Main 2</li>
            <li>Sub Child 3 of Child 2 of Main 2</li>
        </ol>
        </li>
    </ol>
</ol>