2012-04-02 9 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-更新、今6レベル) – Alex

+0

ありがとう、それは素晴らしいソリューションです!今、私は最終的にCSSカウンタの仕組みを理解し始めています... – Elip

関連する問題