¿Estilos de lista personalizados para listas ordenadas?

Question

probablemente un principiante pregunta obvia: Estoy buscando una manera fácil de estilo estándar HTML listas ordenadas y sin ninguna etiqueta como la siguiente jerarquía:

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

¿Existe una solución para este CSS? De acuerdo con mi "investigación", los estilos personalizados para los niveles Cinco a Nueve solo se pueden lograr con contadores de CSS.

Answer 1

Puede lograr esto a través de CSS con el uso de list-style-type. Aplicar una clase personalizada a cada nivel de la jerarquía.

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

Tomado de: http://www.w3schools.com/css/css_list.asp

Puede especificar el texto de encargo al hacer esto, por ejemplo:

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 es resultará en:

aa. foo 
bb. bar 
cc. baz 

entiendo que este no es el más elegante de soluciones, pero es la única forma que conozco para hacerlo.