5

如何在 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 列表只会增加一种类型，无论是十进制还是低 alpha。如何将小数与低 alpha 递增相结合？谢谢！

4

2 回答 2

6

您可以将多个计数器与多个 一起使用counter-reset，并将 acounter-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>

于 2017-11-21T11:22:42.627 回答
4

这是你需要的吗？它不依赖于不同嵌套列表的任何特定类名，因此您可以拥有任意数量的列表。
诀窍是使用外部列表的项目和内部列表的子项目。

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;
}

.nested .nested {
  counter-reset: subitem;
}

.nested .nested li:before {
  content: counter(item) "." counter(subitem, lower-alpha);
  counter-increment: subitem;
}
<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>

于 2017-11-21T14:22:05.603 回答