自定義有序列表中的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>