javascript - 用字母数字字符编号的 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

我已经尝试将列表样式类型设置为 lower-alpha，但它没有正确编号嵌套列表。 我已经用这样的数字实现了我想要的:

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

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

Answer 1

为了达到预期的结果，对订单列表使用类型-'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/en-US/docs/Web/HTML/Element/ol

类型
表示编号类型:
'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. 添加 content - counter(item, lower-alpha)"." 列表和子列表的列表类型为 lower-alpha
3. 重置子列表的计数器以从初始默认值开始(在本例中为“a”)
4. 使用 content: counter(item, lower-alpha)"."counter(letter, lower-alpha) "" 使用列表中的现有订单值，后跟子列表计数器