2014-11-05 8 views
8

Ich mag würde automatisch geordnete Listen haben auf ihrer Ebene als solche gestylt basiert:rekursive Bullet auf verschachtelte geordnete Listen

1. Item 
    a. Item 
    i. Item 
     1. Item 
     a. Item 
      i. Item 
      ... 

Wie Sie sehen, es ist die Wiederholung dieser Sequenz: number > letter > roman numeral

I kann dies durch CSS als

ol { 
    list-style-type:decimal; 
} 
ol > li > ol { 
    list-style-type:lower-alpha; 
} 
ol > li > ol > li > ol { 
    list-style-type:lower-roman; 
} 
ol > li > ol > li > ol > li > ol { 
    list-style-type:decimal; 
} 
... 

tun, aber das ist langweilig und ich weiß nicht, wie viele Ebenen ich benötigen würde.

Gibt es eine sauberere Möglichkeit, dies über CSS zu tun?

Ich sollte anmerken, dass ich das tue, diese sehr einfache Struktur einen HTML-Editor und die erzeugte HTML muss verfassung:

<ol> 
    <li> 
    <ol> 
     <li> 
     .. 

Ich habe keine Kontrolle über den HTML und ich kann Klassen nicht hinzufügen um es oder irgendetwas.

+0

Did [jeder dieser Lösungen] (http://stackoverflow.com/questions/1852816/nested-ordered-lists) Arbeit für dich? – admdrew

+0

@adm sieht aus wie OP will rein css. – nicael

+2

@admdrew Vorzugsweise eine CSS-Lösung. Kein SASS oder WENIGER auch nicht. – Katie

Antwort

3

Es ist nicht die schönste Lösung, aber wir haben jetzt mit diesem gehen entschieden:
Dank @Vucko für was darauf hindeutet, dass wir nicht brauchen, haben die direkte Kind-Selektoren

ol, 
ol ol ol ol, 
ol ol ol ol ol ol ol { 
    list-style-type:decimal; 
} 
ol ol, 
ol ol ol ol ol, 
ol ol ol ol ol ol ol ol { 
    list-style-type:lower-alpha; 
} 
ol ol ol, 
ol ol ol ol ol ol, 
ol ol ol ol ol ol ol ol ol { 
    list-style-type:lower-roman; 
} 

Dies funktioniert natürlich nur bis zur 9. Ebene, aber wir denken nicht, dass eine Liste für unser Szenario so tief gehen wird.

Wenn es nur eine Art von :nth-level() Wähler war ...

+2

olololololol ... ja, so etwas wie n-te Ebene sollte sein: D – nicael