将 HTML 列表深度重置为根级别（用于项目符号）

Question

例如，我想将 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>

Answer 1

似乎所有浏览器都变成了圆盘-正方形，所以我设法用一点 CSS 和 class 来实现这一点（自动应用于 <ul> 内的元素 <ol> 元素，但不是其他元素。）下面的 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;
}

将 HTML 列表深度重置为根级别（用于项目符号）

Reset HTML List Depth To Root Level (for bullets)

html

css

nested-lists

html-lists