html - 样式命令列出项目

Question

我是使用 CSS 列表的迟到者。我已使用此代码创建列表，其中第一个缩进为 az，第二个缩进为 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函数作为选择器的内容——它工作得很好！

基本的jsFiddle在这里

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，做这样的事情。

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; }