看似过于复杂的CSS列表样式应该很容易

Question

我需要为遵循以下格式的有序列表创建样式：

(a)    List Item 1
(b)    List Item 2
    (1)    List Item 2.1
    (2)    List Item 2.2
        (i)    List Item 2.2.1
        (ii)   List Item 2.2.2

不幸的是，list-style-type不起作用，因为没有选项显示上面列出的数字，带括号。

很多研究只带来了丑陋的黑客，例如：

ol {
    list-style-type: none;
}

ol>li:before {
    content: "(" counter(lvl1, lower-alpha) ") ";
}

ol li {
    counter-increment: lvl1;
}

ol ol>li:before {
    content: "(" counter(lvl2, decimal) ") ";
}

ol ol>li {
    counter-increment: lvl2;
}

ol ol ol>li:before {
    content: "(" counter(lvl3, lower-roman) ") ";
}

ol ol ol>li {
    counter-increment: lvl3;
}

在某种程度上有效，删除了list-style-type: none;的列表编号，并在li的开头插入括号括起来的数字。这使得修改其他相关样式可怕，因为我无法弄清楚如何很好地排列等等（我不认为它甚至可能）。它也使list-style-position变得多余，因为数字总是在li内。

基本上，我正在寻找一种在CSS中重现这种列表编号的方法:(注意文本对齐等）

非常感谢任何帮助!!

Answer 1

你快到了。

由于您要删除list-style，您可以通过对列表项应用填充然后将计数器拉入带有负边距的填充（或许多类似技术之一，例如挂起）来恢复计数器的位置缩进）

li {
    padding: 2em;
}

li:before {
    /* Take counter out of flow and pull it into padding space */
    float: left;
    margin-left: -2em;
}

对于counter-reset嵌套的每个级别，您还需要在混合中添加一些ol。

JSFiddle在这里显示了包含所有嵌套代码的完整工作示例：http://jsfiddle.net/thefrontender/tzzbh/2/