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

问题描述

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

How to increment ordered list with numbers and alphabet letters in 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-crement，列表将仅使用十进制或低位alpha的一种类型递增.如何将小数与低位alpha增量相结合?谢谢！

Is there a way to combine numbers with letters (2.a, 2.b, 2.c) and increment them in ordered list? With content and counters-increment the list will be incremented only with one type either decimal or lower-alpha. How to combine decimal with lower-alpha incrementing? Thank you!

推荐答案

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

you can use multiple counters with multiple counter-reset, and apply a counter-increment to ::before and ::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的评论

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

As @Mr Lister answered below you can do it, so I'm updating my answer to meet your specs.

从颜色上可以看出，一个片段与另一个片段的区别在于，在第一个片段中，您对每个项目都有更多的控制权，在这个片段中，它更具通用性.

As you can see by the colors, the difference from one snippet to another is that in the first one you have more control over each item, in this one is more general.

.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>

这篇关于如何在有序列表中组合数字和字母?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！