html - 使用 css 格式化 ol 标签中的 li 标签

标签 html css styles html-lists

我想编写一个样式表,使任何 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>

最佳答案

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

关于html - 使用 css 格式化 ol 标签中的 li 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17507385/

相关文章:

css - 并排定位 div 问题?

html - 列的完美左/右填充

php - 随机背景图片导致登陆页面显示问题?

html - 导航宽度作为主体宽度

javascript - 用户到达页面底部。元素淡出?

android - 样式不适用于支持库 22.1.0

Javascript 多样式集

html - IE10 : 'visibility:visible' on before pseudo-element of 'visibility:hidden' element

jquery - 登录后导航中的下拉菜单

html - 为什么样式没有应用到这个例子中的子元素?