例如,我想将
this fiddle(下面的代码)中的列表级别4设置为根级别.这意味着等级4的子弹看起来像等级1,等级5看起来像等级2,等级6看起来像等级3.这需要在没有手动覆盖每个物品的子弹的情况下发生,因为不同的浏览器具有不同的子弹样式.
<ul>
<li>level 1 item</li>
<li>level 1 item
<ul>
<li>level 2 item</li>
<li>level 2 item
<ul>
<li>level 3 item</li>
<li>level 3 item
<ul>
<li>level 4 item</li>
<li>level 4 item
<ul>
<li>level 5 item</li>
<li>level 5 item
<ul>
<li>level 6 item</li>
<li>level 6 item</li>
<li>level 6 item</li>
</ul>
</li>
<li>level 5 item</li>
</ul>
</li>
<li>level 4 item</li>
</ul>
</li>
<li>level 3 item</li>
</ul>
</li>
<li>level 2 item</li>
</ul>
</li>
<li>level 1 item</li>
</ul>
最佳答案 似乎所有的浏览器都是圆盘方形的,所以我设法用一些CSS和一个类(自动应用于< ol>元素中的< ul>元素,但不是其他.)
Fiddle here和CSS下面:
ol > li > ul > li > ul > li > ul {
list-style-type: square;
}
ul.initial > li > ul > li > ul {
list-style-type: square;
}
ol > li > ul > li > ul {
list-style-type: circle;
}
ul.initial > li > ul {
list-style-type: circle;
}
ol > li > ul {
list-style: initial;
}
ul.initial {
list-style: initial;
}