CSS嵌套有序列表使用字母数字字符编号

Question

我正在尝试创建一个有序列表，其中包含嵌套列表和字母数字字符的编号样式。

示例：

a. one
b. two
   b.a. three
   b.b. four
   b.c. five
c. six
   c.a. seven
      c.a.a. eight
   c.b. nine
      c.b.a. ten
d. eleven

我曾试过将list-style-type设置为lower-alpha，但它不能正确地给嵌套列表编号。 我通过以下的数字达到了我想要的效果：

 ol {
    counter-reset: section;  
    list-style-type: none;
 }
 li {
    counter-increment: section;
 }
 li::before {  
    content: counters(section,".") ". ";
}

现在我想要相同的东西，但是带有字母数字字符作为编号样式。 解决方案可以使用HTML、CSS或JS完成。

- Freddy19

---

https://stackoverflow.com/questions/31859932/style-an-ordered-list-like-1-1-1-2-instead-of-1-2 - Paulie_D

可能是A styled ordered list whose nested list should have numbers with letters using CSS counter property的重复问题。这里有一个演示，基于那个答案。 - showdev

Answer 1

为了达到预期的结果，在有序列表中使用 type - 'a'。

<ol type="a">
  <li>one</li>
  <li>two
  <ol type="a">
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ol></li>
</ol>

请参考此链接以获取不同的有序列表类型 - https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ol type
表示编码类型：
'a' 表示小写字母，
'A' 表示大写字母，
'i' 表示小写罗马数字，
'I' 表示大写罗马数字，
'1' 表示数字（默认）。

代码示例以实现预期格式。

ol{
  list-style: none;
  counter-reset: item;
}

ol > li:before{
    counter-increment: item;
    content: counter(item, lower-alpha)".";
}

ol li ol{
    counter-reset: letter;
}
ol ol li:before{
    counter-increment: letter;
    content: counter(item, lower-alpha)"."counter(letter, lower-alpha) " ";
}

<ol type="a"> 
  <li>one</li>
  <li>two
  <ol>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ol></li>
</ol>

codepen - https://codepen.io/nagasai/pen/rgPgBO

说明：

1. 重置所有有序列表的列表样式并将计数器重置为初始默认值。
2. 在列表和子列表中添加内容- counter（item，lower-alpha）“。”以列表类型lower-alpha形式呈现。
3. 将子列表的计数器重置为初始默认值（在本例中为'a'） 。
4. 使用content: counter(item, lower-alpha)"."counter(letter, lower-alpha) " "来使用来自列表的现有顺序值，后跟子列表计数器。

- Naga Sai A

---

请查看我在问题中发布的示例。 - Freddy19