我想知道如何在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
答案 0 :(得分:1)
像这样:
ol.number, ol.letter {
list-style-type: none;
}
ol.number {
counter-reset: number;
}
ol.letter {
counter-reset: letter;
}
ol.number > li:before {
content: counter(number, decimal) " ";
counter-increment: number;
}
ol.letter > li:before {
content: counter(number, decimal) counter(letter, upper-alpha) " ";
counter-increment: letter;
}

<ol class="number">
<li>Item 1</li>
<ol class="letter">
<li>Item 2</li>
<li>Item 3</li>
</ol>
<li>Item 4</li>
<ol class="letter">
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ol>
<li>Item 8</li>
</ol>
&#13;
或者,如果您更喜欢自动计算索引:
ol.number, ol.letter {
list-style-type: none;
}
ol.number {
counter-reset: number index;
}
ol.letter {
counter-reset: letter;
}
ol.number > li:before {
content: counter(number, decimal) " ";
counter-increment: number;
}
ol.letter > li:before {
content: counter(number, decimal) counter(letter, upper-alpha) " ";
counter-increment: letter;
}
ol.number li:after {
content: " " counter(index, decimal);
counter-increment: index;
}
&#13;
<ol class="number">
<li>Item</li>
<ol class="letter">
<li>Item</li>
<li>Item</li>
</ol>
<li>Item</li>
<ol class="letter">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
<li>Item</li>
</ol>
&#13;