自动继续订购的清单编号 [英] Continue ordered list numbering automatically

问题描述

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

I wonder how I can have the following ordered list in 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

推荐答案

像这样:

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>

或者，如果您也希望自动对索引进行计数:

Or if you'd prefer to automate counting the index as well:

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>

这篇关于自动继续订购的清单编号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！