对<ol>列表项</ol>的样式命令

Question

我是处理CSS列表的后来者。我使用此代码创建列表，其中第一个缩进是a-z，第二个缩进是roman，i，ii，iii，iv等：

/* SF/2013-10-16; this code will create 1.a.i structure similar perh. to a legal document.. */
ol > li > ol {
    list-style-type: lower-alpha;
}

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

但我想知道是否有任何方法可以使列表索引（1,2,3，a，b，c，i，ii，iii）的字体与实际列表文本本身不同 - 优雅 - 并且还要更改列表索引的大小或颜色。谢谢你的帮助！

Answer 1

如果使用:before伪选择器插入罗马数字，则可以完全控制样式。我使用counter-increment函数作为选择器的内容 - 它运行得很好！

Basic jsFiddle here

<强> CSS

li {
    list-style:none;
    counter-increment: name;
}
li:before {
    content: counter(name, lower-roman);
    font-size:26px;
    color:red;
    margin-right:10px;
}

您甚至可以使用nth-child和do stuff like this。

li:first-child:before {
    content: counter(name, lower-alpha);
    font-size:40px;
    color:orange;
    font-weight:bold;
    margin-right:10px;
}
li:nth-child(2n+2):before {
    content: counter(name, decimal-leading-zero);
    font-size:26px;
    color:green;
    margin-right:10px;
}
li:nth-child(2n+3):before {
    content: counter(name, lower-roman);
    font-size:26px;
    color:red;
    margin-right:10px;
}

Answer 2

如果将最终列表内容包装在另一个元素中，则可以单独设置索引和内容的样式，如下所示：

<ol><li><span>some text</span></li></ol>

使用关联的CSS：

ol li { color: red; }
ol li span { color: blue; }