如何在有序列表中组合数字和字母？

Question

如何在 CSS 中使用数字和字母递增有序列表：

    ol.nested { 
        margin-bottom: 0;
        counter-reset: item;
    }
    
    ol.nested li { 
        display: block;
        position: relative;
    }
    
    ol.nested li:before { 
        content: counters(item, ".", decimal) "."; 
        counter-increment: item;
        position: absolute;
        margin-right:100%;
        right: 10px;
    }

<ol class="nested">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3
    <ol class="nested">
        <li>Show Item 3.a instead of 3.1</li>
        <li>Show Item 3.b instead of 3.2</li>
        <li>Show Item 3.c instead of 3.3</li>
    </ol>
    </li>
    <li>Item 4
	<ol class="nested">
        <li>Show Item 4.a instead of 4.1</li>
        <li>Show Item 4.b instead of 4.2</li>
        <li>Show Item 4.c instead of 4.3</li>
    </ol>
	</li>
	<li>Item 5</li>
</ol>

有没有办法将数字与字母（2.a、2.b、2.c）组合起来并在有序列表中递增它们？使用 content 和 counters-increment 列表将仅使用一种类型递增，无论是十进制还是小数字母。如何将十进制与低阿尔法递增相结合？谢谢！

Answer 1

您可以将多个计数器与 multiple 一起使用counter-reset，并将 a 应用counter-increment到::before和::after

.nested {
  margin-bottom: 0;
  counter-reset: number letter; /* default reset for number and letter */
}

.nested.third li {
  counter-reset: number 2; /* reset all child li in order to keep 3.x */
}

.nested.fourth {
  counter-reset: letter  /* reset the letter to restart at A */
}

.nested.fourth li {
  counter-reset: number 3;  /* reset all child li in order to keep 4.x */
}

.nested li {
  display: block;
  position: relative;
}

.parent li::before {
  content: counter(number)".";
  counter-increment: number; /* increment the numbers in general */
  position: absolute;
  margin-right: 100%;
  right: 20px;
  background: lightgreen
}

.child li::after {
  content: counter(letter, lower-alpha); /* increment the letters in general */
  counter-increment: letter;
  position: absolute;
  margin-right: 100%;
  right: 10px;
  background: lightblue;
  width: 10px
}

<ol class="nested parent">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ol class="nested child third">
      <li>Show Item 3.a instead of 3.1</li>
      <li>Show Item 3.b instead of 3.2</li>
      <li>Show Item 3.c instead of 3.3</li>
    </ol>
  </li>
  <li>Item 4
    <ol class="nested child fourth">
      <li>Show Item 4.a instead of 4.1</li>
      <li>Show Item 4.b instead of 4.2</li>
      <li>Show Item 4.c instead of 4.3</li>
    </ol>
  </li>
  <li>Item 5</li>
</ol>

OP的评论

对不起，你说得对。数字和我问的完全一样。有没有办法为下一个项目 5、6、7 等提供通用的 css 类？嗯。

正如@Mr Lister 在下面回答的那样，您可以做到，所以我正在更新我的答案以满足您的要求。

正如您通过颜色所看到的，一个片段与另一个片段的区别在于，在第一个片段中，您对每个项目有更多的控制权，而在这个片段中，则更通用。

.nested li {
  display: block;
  position: relative;
}


.nested {
  margin-bottom: 0;
  counter-reset: number;
}


.parent .nested {
  counter-reset: letter;
}

.parent .nested li::before {
  content: counter(number) "." counter(letter, lower-alpha);
  counter-increment: letter;
  background: lightblue
}


.nested li::before {
  content: counter(number) ".";
  counter-increment: number;
  position: absolute;
  margin-right: 100%;
  right: 10px;
  background: lightgreen
}

<ol class="nested parent">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ol class="nested">
      <li>Show Item 3.a instead of 3.1</li>
      <li>Show Item 3.b instead of 3.2</li>
      <li>Show Item 3.c instead of 3.3</li>
    </ol>
  </li>
  <li>Item 4
    <ol class="nested">
      <li>Show Item 4.a instead of 4.1</li>
      <li>Show Item 4.b instead of 4.2</li>
      <li>Show Item 4.c instead of 4.3</li>
    </ol>
  </li>
  <li>Item 5</li>
</ol>