Niestandardowe style listy dla uporządkowanych list?

Question

Prawdopodobnie oczywistym Początkujący pytanie: szukam łatwy sposób uporządkowany styl standardowy list HTML bez znaczników takich jak następującej hierarchii:

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

Czy istnieje rozwiązanie CSS dla tego? Zgodnie z moimi "badaniami" niestandardowe stylizacje dla poziomów od piątego do dziewiątego można osiągnąć tylko za pomocą liczników CSS?

Answer 1

Możesz to osiągnąć poprzez CSS przy użyciu list-style-type. Zastosuj niestandardową klasę do każdego poziomu hierarchii.

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;} 

albumu: http://www.w3schools.com/css/css_list.asp

Można określić własny tekst w ten sposób na przykład:

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 to spowoduje:

aa. foo 
bb. bar 
cc. baz 

Rozumiem, że to nie jest najbardziej elegancki rozwiązań, ale jest to jedyny sposób, znam to zrobić.