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

问题描述 投票:1回答:4

我想编写一个样式表,该样式表将使所有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>
html css styles html-lists
4个回答
2
投票

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

0
投票

尝试更改此设置

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

对此

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

和此

 <li>level 1
     <li>level 2

to

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


0
投票

向您的结构添加ID和类会更好。


0
投票

您正在嵌套有序列表(<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; }
© www.soinside.com 2019 - 2024. All rights reserved.