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

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，列表将仅使用一种类型 decimal 或 lower-alpha 递增。如何将 decimal 与 lower-alpha 递增相结合？谢谢!

Answer 1

您可以将多个计数器与多个 counter-reset 一起使用，并将 counter-increment 应用于 ::before 和 : :之后

.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 的评论

Sorry, you're right. The numbers are exactly as I asked. Is there no way to have generic css class for the next items 5, 6, 7 and so on? Hm.

正如 @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>