Wie soll ich HTML-Codierung eines Umrisses mit römischen Ziffern, Zahlen, Alphabuchstaben umgehen?

Question

Was ist die korrekte HTML-Formatierung für eine typische Inhaltsgliederung mit römischen Ziffern, Zahlen, Buchstaben usw.? Sagen wir, ich habe drei Hauptabschnitte der obersten Ebene, die Römischen Ziffern I, II und III. Jeder von ihnen hat zwei Unterthemen A. und B. jeder von ihnen hat zwischen 2 und 4 Unterthemen 1) bis 4). Gibt es einen bekannten Hack, um die richtigen Einrückungen zu erreichen, oder ist alles von Hand, Abschnitt für Abschnitt?

Answer 1

Sie suchen nach der CSS-Unterliste für geordnete Listen list-style-type (MDN).

Speziell

list-style-type: decimal 
list-style-type: upper-roman 
list-style-type: upper-alpha 

einfach dann die Selektoren Shain

ol {} //top level numbers 
ol > li > ol {} //sub level roman 
ol > li > ol > li > ol {} //sub sub level letters 

Answer 2

Hier ist die einfachste Art und Weise zu erreichen, was Sie versuchen, einige Beispiel-Code zu tun, mit.

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

<ol> 
 
    <li> 
 
    list point 
 
    <ol> 
 
     <li> 
 
     list point 
 
     <ol> 
 
      <li>list point</li> 
 
      <li>list point</li> 
 
     </ol> 
 
     </li> 
 
     <li> 
 
     list point 
 
     <ol> 
 
      <li>list point</li> 
 
      <li>list point</li> 
 
     </ol> 
 
     </li> 
 
     <li> 
 
     list point 
 
     <ol> 
 
      <li>list point</li> 
 
      <li>list point</li> 
 
     </ol> 
 
     </li> 
 
    </ol> 
 
    </li> 
 
    <li> 
 
    list point 
 
    <ol> 
 
     <li> 
 
     list point 
 
     <ol> 
 
      <li>list point</li> 
 
      <li>list point</li> 
 
     </ol> 
 
     </li> 
 
     <li> 
 
     list point 
 
     <ol> 
 
      <li>list point</li> 
 
      <li>list point</li> 
 
     </ol> 
 
     </li> 
 
     <li> 
 
     list point 
 
     <ol> 
 
      <li>list point</li> 
 
      <li>list point</li> 
 
     </ol> 
 
     </li> 
 
    </ol> 
 
    </li> 
 
    <li> 
 
    list point 
 
    <ol> 
 
     <li> 
 
     list point 
 
     <ol> 
 
      <li>list point</li> 
 
      <li>list point</li> 
 
     </ol> 
 
     </li> 
 
     <li> 
 
     list point 
 
     <ol> 
 
      <li>list point</li> 
 
      <li>list point</li> 
 
     </ol> 
 
     </li> 
 
     <li> 
 
     list point 
 
     <ol> 
 
      <li>list point</li> 
 
      <li>list point</li> 
 
     </ol> 
 
     </li> 
 
    </ol> 
 
    </li> 
 
    <li> 
 
    list point 
 
    <ol> 
 
     <li> 
 
     list point 
 
     <ol> 
 
      <li>list point</li> 
 
      <li>list point</li> 
 
     </ol> 
 
     </li> 
 
     <li> 
 
     list point 
 
     <ol> 
 
      <li>list point</li> 
 
      <li>list point</li> 
 
     </ol> 
 
     </li> 
 
     <li> 
 
     list point 
 
     <ol> 
 
      <li>list point</li> 
 
      <li>list point</li> 
 
     </ol> 
 
     </li> 
 
    </ol> 
 
    </li> 
 
</ol>