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

【问题标题】：Using css to format li tags within ol tags使用css格式化ol标签内的li标签
【发布时间】：2013-07-04 15:34:31
【问题描述】：

我想写一个样式表，它将使任何 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>

【问题讨论】：

嵌套的li也需要ul或ol。

标签： html css styles html-lists

【解决方案1】：

您正在嵌套有序列表 (<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; }

【讨论】：

【解决方案2】：

在结构中添加 ID 和类会更好。

【讨论】：

【解决方案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

等等。

【讨论】：

【解决方案4】：

由于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>

【讨论】：