html - 列表项的样式命令

Question

我是使用 CSS 列表的后来者。我使用此代码创建列表，其中第一个缩进为 a-z，第二个缩进为罗马、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;
}