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

【问题标题】：Recursive bullet style on nested ordered lists嵌套有序列表上的递归项目符号样式
【发布时间】：2014-11-05 17:42:31
【问题描述】：

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

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

【问题讨论】：

any of these solutions 为你工作了吗？
@adm 看起来 OP 想要纯 CSS。
@admdrew 最好是纯 CSS 解决方案。也没有 SASS 或 LESS。
你没有在li上使用任何样式，所以你可以使用ol/ol ol/ol ol ol/ol ol ol ol，没有直接子选择器。

标签： html css

【解决方案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() 选择器就好了……}

【讨论】：