これは、あなたの例にかなり近い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-唯一のソリューションです。
これはjQueryで行うこともできますが、コードを記述する必要があります。 –
あなたの他の質問(http://stackoverflow.com/questions/9980379/custom-list-styles-for-ordered-lists)の答えは十分ではありませんか? – j08691