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



我想让排序列表根据其级别自动设置样式,例如:

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,也无法向其中添加类或其他内容。

这不是最漂亮的解决方案,但我们现在决定使用这个:
感谢@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()选择器

最新更新