将HTML列表深度重置为根级别(对于项目符号)

例如,我想将
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;
}
点赞