在进行前端开发时，我们通常会使用 CSS Reset 来规范浏览器默认样式，以便我们更好地控制页面的样式。然而，使用 CSS Reset 也可能会带来一些问题，比如列表样式异常，特别是在多层嵌套的列表结构中。本文将详细介绍这个问题的原因，以及如何解决它。
问题的原因
CSS Reset 通常会将 ul 和 ol 元素的列表样式全部清除，以便我们自定义样式。例如，以下是一个经典的 CSS Reset：
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}这样做的效果是，所有的列表都没有了默认的缩进和圆点样式，变成了一个空白的矩形块。但是，如果我们在自定义样式时没有考虑到这点，就容易造成样式异常。比如，以下代码：
-- -------------------- ---- -------
----
-------- ---- ------
-------- ---- ------
-------- ---- -
----
---------- ---- ------
---------- ---- ------
-----
-----
-----如果我们想要将一级列表的项用圆点标记，二级列表的项用短横线标记，应该怎样写 CSS 呢？如果我们只写了以下样式：
-- -------------------- ---- ------- -- - -------- ------ -------------- ---- ------------- ----- ----------------- -------- - -- -- -- - ---------------- ----- ------------- -- ----------------- ----- -
这样写会导致第一级列表的项也没有了圆点标记，而第二级列表的项也没有了短横线标记。这是因为我们在 Reset 里清除了所有列表的样式，包括一级列表。所以，为了解决这个问题，我们需要对一级列表重新设置样式。
解决方案
解决这个问题的方法很简单，就是针对不同级别的列表设置不同的样式。比如，我们可以这样写 CSS：
-- -------------------- ---- ------- -- - ---------------- ----- - -- - ---------------- -------- - -- --- -- -- - ---------------- ------- - -- -- --- -- -- -- - ---------------- ------- -
这里我们使用了 list-style-type 属性，它可以设置列表的标记类型。默认值是 disc，表示用圆点标记。其他可选值包括 decimal（用数字标记）、square（用矩形标记）、circle（用空心圆标记）等。我们根据不同级别的列表设置不同的标记类型，从而解决样式异常的问题。
对于以上例子中的嵌套列表，我们可以这样写 CSS：
-- -------------------- ---- ------- -- - ---------------- ----- - -- - -------- ------ -------------- ---- ------------- ----- ----------------- -------- - -- -- - ------- --- - - ----- ------------- -- ----------------- ----- ---------------- ------- - -- -- -- -- - ------- - - - ----- ---------------- ------- -
这里我们只对 ul 元素设置了 list-style-type，而对 li 元素设置了其他样式，包括 display、margin、padding 和 background-color。对于嵌套的列表，我们通过设置 margin 和 list-style-type 来区分不同级别的列表。这样就可以在不破坏 Reset 的前提下，为列表设置正确的样式了。
示例代码
以下是完整的示例代码，仅供参考：
-- -------------------- ---- -------
----
-------- ---- ------
-------- ---- ------
-------- ---- -
----
---------- ---- ------
---------- ---- -
----
-------- ------- ---- ------
-------- ------- ---- ------
-----
-----
-----
-----
-----
-------
-- -
---------------- -----
-
-- -
-------- ------
-------------- ----
------------- -----
----------------- --------
-
-- -- -
------- --- - - -----
------------- --
----------------- -----
---------------- -------
-
-- -- -- -- -
------- - - - -----
---------------- -------
-
--------结论
通过本文的介绍，我们了解了 CSS Reset 带来的列表样式异常问题的原因，以及如何解决它。总结起来，我们需要针对不同级别的列表设置不同的样式，包括标记类型、边距、背景色等。在遇到类似的样式异常问题时，我们可以尝试使用这种区分级别的方式进行解决。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475686f968c7c53b027a81e