1

ol 要素内の li 要素にアウトライン スタイルで番号を付けるスタイル シートを作成したいと考えています。

大文字のローマ数字、次のレベルの大文字、次のレベルの小文字のローマ数字、小文字、および 5 番目のレベルの 10 進数を使用する最上位の li 要素。

これは私の試みですが、その結果、すべてのレベルがアッパー ローマン スタイルで表示されます。

前もって感謝します。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
    ol > li {list-style: upper-roman}
    ol > li > li {list-style: upper-alpha}
    ol > li > li > li {list-style: lower-roman}
    ol > li > li > li > li {list-style: lower-alpha}
    ol > li > li > li > li > li {list-style: decimal}
    </style>
  </head>
  <body>
    <ol>
      <li>level 1
         <li>level 2
            <li>level 3
               <li>level 4
                  <li>level 5</li>
               </li>
            </li>
         </li>
       </li>
    </ol>
  </body>
</html>
4

4 に答える 4

2

私のコメントに記載されている理由により、olタグもネストする必要があります。ここに表示する作業フィドルがあります。

CSS

ol > li {
    list-style: upper-roman
}
ol > li li {
    list-style: upper-alpha
}
ol > li li li {
    list-style: lower-roman
}
ol > li li li li {
    list-style: lower-alpha
}
ol > li li li li li {
    list-style: decimal
}

HTML

<body>
    <ol>
        <li>level 1
            <ol>
                <li>level 2
                    <ol>
                        <li>level 3
                            <ol>
                                <li>level 4
                                    <ol>
                                        <li>level 5</li>
                                    </ol>
                                </li>
                            </ol>
                        </li>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>
</body>
于 2013-07-06T21:45:07.490 に答える
0

これを変更してみてください

ol > li > li {list-style: upper-alpha}

これに

ol > li > ol > li {list-style: upper-alpha}

この

 <li>level 1
     <li>level 2

に

    <li>level 1
     <ol><li>level 2

等

于 2013-07-06T21:45:25.957 に答える