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完成。

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

说明：

重置所有有序列表的列表样式并将计数器重置为初始默认值
添加 content-counter（item，lower-alpha）“。” ，列表和子列表的列表类型为lower-alpha
将子列表的计数器重置为从初始默认值开始（在这种情况下为'a'）
使用 content：counter（item，lower-alpha）“。” counter（letter，lower-alpha）“” 使用列表中现有的订单值，然后使用子列表中的计数器

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

1 个答案: