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

概述例如,我想将 this fiddle(下面的代码)中的列表级别4设置为根级别.这意味着等级4的子d看起来像等级1,等级5看起来像等级2,等级6看起来像等级3.这需要在没有手动覆盖每个物品的子d的情况下发生,因为不同的浏览器具有不同的子d样式. <ul> <li>level 1 item</li> <li>level 1 item <ul> < 例如,我想将 this fiddle(下面的代码)中的列表级别4设置为根级别.这意味着等级4的子d看起来像等级1,等级5看起来像等级2,等级6看起来像等级3.这需要在没有手动覆盖每个物品的子d的情况下发生,因为不同的浏览器具有不同的子d样式.

<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;}

总结

以上是内存溢出为你收集整理的将HTML列表深度重置为根级别(对于项目符号)全部内容，希望文章能够帮你解决将HTML列表深度重置为根级别(对于项目符号)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。