Question

我想写一个样式表，它会导致任何ol元素中的li元素以大纲样式编号：

使用大写罗马数字的顶级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>

Answer 1

出于my comment中提到的原因，您还需要嵌套ol标记。这是一个有效的fiddle来展示。

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>

Answer 2

您要嵌套有序列表（<ol>），而不是列表项（<li>），因此请尝试以下操作：

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

Answer 3

尝试更改此

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

等。

Answer 4

为您的结构添加ID和类将有助于更好。

使用css格式化ol标签内的li标签

4 个答案:

CSS

HTML