2012-04-02 4 views
0

Я ищу способ применения так называемого «буквенно-цифрового порядка» для стандартных упорядоченных списков html. (Буквенно-цифровой: http://de.wikipedia.org/wiki/Gliederung#Alphanumerische_Gliederung)Буквенно-цифровой список упорядоченных списков?

Я хотел бы достичь этого, не добавляя вручную никаких тегов в содержимое html. Мне кажется, что в CSS нет способа добиться этого? Может ли это быть сделано с помощью jQuery? Я очень новичок в программировании, любая помощь очень ценится.

+0

Это можно сделать с помощью jQuery, но вам нужно будет написать код. –

+3

Не удалось ли ответить в другом вопросе (http://stackoverflow.com/questions/9980379/custom-list-styles-for-ordered-lists)? – j08691

ответ

3

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

Обратите внимание, что вы можете упростить селектора для 'div ul',' div ul ul', 'div ul ul ul' и т. Д. – Phrogz

+0

Спасибо, Phrogz. Не знаю, почему я сделал это так сложно x__O (btw-updated, теперь 6 уровней) – Alex

+0

Спасибо, это блестящее решение! Теперь я, наконец, начинаю понимать, как работают счетчики CSS ... – Elip

Смежные вопросы