Я думаю, что это будет решение 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