2012-04-02 29 views
0

我正在尋找一種方法來爲標準的html排序列表應用所謂的「字母數字順序」。 (字母數字:http://de.wikipedia.org/wiki/Gliederung#Alphanumerische_Gliederung有序列表的字母數字列表?

我想實現這一點,而不需要手動添加任何標籤到html內容。在我看來,在CSS中無法實現這一點?這可能是用jQuery完成的嗎? 我很新的編程,任何幫助,非常感謝。

+0

它可以用jQuery來完成,但是你必須編寫代碼。 – 2012-04-02 18:41:59

+3

在您的其他問題(http://stackoverflow.com/questions/9980379/custom-list-styles-for-ordered-lists)答案不夠嗎? – j08691 2012-04-02 18:48:56

回答

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','div ul ul ul'等。 – Phrogz 2012-04-02 19:00:06

+0

謝謝Phrogz。不知道爲什麼我這麼做很複雜x__O(btw-更新,現在6級) – Alex 2012-04-02 19:02:15

+0

謝謝,這是一個輝煌的解決方案!現在我終於開始明白CSS計數器的工作原理了...... – Elip 2012-04-02 19:13:10