Question

我希望根据其级别自动设置排序列表：

1. Item
  a. Item
    i. Item
      1. Item
        a. Item
          i. Item
           ...

正如您所看到的，重复此序列：number > letter > roman numeral

我可以通过CSS做到这一点

ol {
    list-style-type:decimal;
}
ol > li > ol {
    list-style-type:lower-alpha;
}
ol > li > ol > li > ol {
    list-style-type:lower-roman;
}
ol > li > ol > li > ol > li > ol {
    list-style-type:decimal;
}
...

但这很乏味，我不知道我需要多少级别。

有没有更简洁的方法通过CSS执行此操作？

我应该注意到我这样做是为了设置一个HTML编辑器，生成的HTML有这个非常基本的结构：

<ol>
  <li>
    <ol>
      <li>
        ..

我无法控制HTML，也无法向其中添加类或任何内容。

Answer 1

这不是最漂亮的解决方案，但我们现在决定使用这个解决方案：
_{感谢@Vucko建议我们不需要直接子选择器}

ol,
ol ol ol ol,
ol ol ol ol ol ol ol {
    list-style-type:decimal;
}
ol ol,
ol ol ol ol ol,
ol ol ol ol ol ol ol ol {
    list-style-type:lower-alpha;
}
ol ol ol,
ol ol ol ol ol ol,
ol ol ol ol ol ol ol ol ol {
    list-style-type:lower-roman;
}

这显然只能持续到第9级，但我们认为任何列表都不会因为我们的情况而深入。

_{如果只有某种:nth-level()选择器......}

嵌套有序列表上的递归项目符号样式

1 个答案: