注文リストのカスタムリストスタイル？

Question

はおそらく明白な初心者の質問：私は、標準的なHTMLのスタイルを設定する簡単な方法を探していますが、次の階層のような任意のタグなしのリストを命じた：

A. One 
    I. Two 
     1. Three 
      a. Four 
       aa. Five 
        (I.) Six 
         (1.) Seven 
          (a.) Eight 
           (aa.) Nine 

は、このためのCSSの解決策はありますか？私の "研究"によると、レベル5〜9のカスタムスタイルはCSSカウンターでしか達成できないのですか？

Answer 1

list-style-typeを使用してCSSでこれを達成できます。階層の各レベルにカスタムクラスを適用します。あなたは、たとえば、これを行うことにより、カスタムテキストを指定することができhttp://www.w3schools.com/css/css_list.asp

：

CSS：

ul.custom 
{ 
    list-style-type: none; 
    padding: 0; 
} 

ul.custom li.aa:before { content: "aa. "; } 
ul.custom li.bb:before { content: "bb. "; } 
ul.custom li.cc:before { content: "cc. "; } 

HTML：

<ul class="custom"> 
    <li class="aa">foo</li> 
    <li class="bb">bar</li> 
    <li class="cc">baz</li> 
</ul> 

のThをから撮影

ul.a {list-style-type: circle;} 
ul.b {list-style-type: square;} 

ol.c {list-style-type: upper-roman;} 
ol.d {list-style-type: lower-alpha;} 

なります：私はこれがソリューションの最もエレガントではないことを理解

aa. foo 
bb. bar 
cc. baz 

が、それはそれを行うには、私が知っている唯一の方法です。