1

我想编写一个样式表，它将使任何 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>
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 回答
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; }
于 2019-12-26T07:04:46.027 回答
0

Try changing this

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

to this

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

and this

 <li>level 1
     <li>level 2

to

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

etc.

于 2013-07-06T21:45:25.957 回答
0

将 ID 和类添加到您的结构中会有所帮助。

于 2013-07-06T23:51:43.177 回答