繼續自動排序列表編號

Question

我想知道如何在 html 中擁有以下有序列表

1 Item 1
1A Item 2
1B Item 3
2 Item 4
2A Item 5
2B Item 6
2C Item 7
3 Item 8

Answer 1

像這樣：

 ol.number, .letter > ol { list-style-type: none; } ol.number { counter-reset: number; } .letter > ol { counter-reset: letter; } ol.number > li:not(.letter):before { content: counter(number, decimal) " "; counter-increment: number; } .letter > ol > li:before { content: counter(number, decimal) counter(letter, upper-alpha) " "; counter-increment: letter; }

 <ol class="number"> <li>Item 1</li> <li class="letter"> <ol> <li>Item 2</li> <li>Item 3</li> </ol> </li> <li>Item 4</li> <li class="letter"> <ol> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> </ol> </li> <li>Item 8</li> </ol>

或者，如果您也希望自動計算索引：

 ol.number, .letter > ol { list-style-type: none; } ol.number { counter-reset: number index; } .letter > ol { counter-reset: letter; } ol.number > li:not(.letter):before { content: counter(number, decimal) " "; counter-increment: number; } .letter > ol > li:before { content: counter(number, decimal) counter(letter, upper-alpha) " "; counter-increment: letter; } ol.number li:not(.letter):after { content: " " counter(index, decimal); counter-increment: index; }

 <ol class="number"> <li>Item</li> <li class="letter"> <ol> <li>Item</li> <li>Item</li> </ol> </li> <li>Item</li> <li class="letter"> <ol> <li>Item</li> <li>Item</li> <li>Item</li> </ol> </li> <li>Item</li> </ol>