html - 在有序列表中自定义 CSS 计数器

Question

我想创建两个有序（彼此独立）的 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>