Question

我正在寻找一种方法来为标准的html有序列表应用所谓的“字母数字顺序”。（字母数字：http://de.wikipedia.org/wiki/Gliederung#Alphanumerische_Gliederung）

我想在不手动添加任何标签到html内容的情况下实现此目的。在我看来，没有办法在CSS中实现这一点？这可能是用jQuery完成的吗？我是编程的新手，非常感谢任何帮助。

Answer 1

我认为这将是一个非常接近你的例子的CSS解决方案。 http://jsfiddle.net/UChFP/5/

/*1*/
div ul{
    list-style-type:upper-alpha;
}
/*2*/
div ul ul{
    list-style-type:upper-roman;
}
/*3*/
div ul ul ul{
    list-style-type:decimal;
}
/*4*/
div ul ul ul ul{
    list-style:none;
}
div ul ul ul ul>li:before{
    content: counter(section, lower-alpha) ") ";}
div ul ul ul ul>li {
    counter-increment: section;
}
/*5*/
div ul ul ul ul ul{
    list-style:none;
}
div ul ul ul ul ul>li:before{
    content: counter(sectionU, lower-alpha) counter(sectionU, lower-alpha) ") ";}
div ul ul ul ul ul>li {
    counter-increment: sectionU;
}
/*6*/
div ul ul ul ul ul ul{
    list-style:none;
}
div ul ul ul ul ul ul>li:before{
    content: "(" counter(sectionUU, decimal) ") ";}
div ul ul ul ul ul ul>li {
    counter-increment: sectionUU;
}
/*7*/
div ul ul ul ul ul ul ul{
    list-style:none;
}
div ul ul ul ul ul ul ul>li:before{
    content: counter(sectionUUU, lower-greek) ") ";}
div ul ul ul ul ul ul ul>li {
    counter-increment: sectionUUU;
}

这是一个非常好的仅限CSS的解决方案，支持您示例的所有级别。

有序列表的字母数字列表？

1 个答案: