ローマ数字、アルファベット、アルファベットのアウトラインのHTMLコーディングにはどうすればよいですか？

Question

ローマ数字、アルファベット、アルファベットなどを使用した一般的なコンテンツのアウトラインの適切なHTML書式は何ですか？ローマ数字I、II、IIIの3つの主要なトップレベルセクションがあるとします。それぞれに2つのサブトピックA.とB.があり、それぞれには1〜4のサブサブトピックが2〜4つあります。適切なインデントを達成するための既知のハックはありますか、それともすべて手で、セクションごとですか？

Answer 1

CSS注文リストのサブプロパティlist-style-type（MDN）を探しています。

具体的

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

そして、単に、セレクタ

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

Answer 2

をshainここではいくつかのサンプルコードで、何をしようとして達成する最も簡単な方法です。

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>