背景
在前端开发中，我们经常会使用 CSS Reset 来统一不同浏览器的默认样式，以便更好地控制页面样式。然而，使用 CSS Reset 后，我们可能会发现原本设置的列表样式（如有序列表和无序列表）被清除了，变得不可见了。
原因
这是因为 CSS Reset 会将所有元素的默认样式都清除掉，包括列表样式。因此，我们需要重新设置列表样式。
解决方案
1. 使用 :before 和 content 属性
我们可以使用 :before 和 content 属性来设置列表样式，如下所示：
-- -------------------- ---- ------- -- - ----------- ----- -------- -- ------- -- - --------- - -------- ---- ------------- ----- -
这段代码会将无序列表的默认样式清除，并在每个列表项前面添加一个黑色圆点。
对于有序列表，我们可以使用 counter 和 content 属性，如下所示：
-- -------------------- ---- ------- -- - ----------- ----- -------- -- ------- -- -------------- ----- - --------- - ------------------ ----- -------- ------------- ---- ------------- ----- -
这段代码会将有序列表的默认样式清除，并在每个列表项前面添加一个序号。
2. 使用自定义图片
我们也可以使用自定义图片来替代默认的列表样式，如下所示：
-- -------------------- ---- ------- -- - ----------- ----- -------- -- ------- -- - -- - ----------------- ------------------ ------------------ ---------- -------------------- - ---- ------------- ----- -
这段代码会将无序列表的默认样式清除，并在每个列表项前面添加一个自定义图片。
对于有序列表，我们可以使用类似的方法，如下所示：
-- -------------------- ---- ------- -- - ----------- ----- -------- -- ------- -- -------------- ----- - -- - ----------------- ------------------ ------------------ ---------- -------------------- - ---- ------------- ----- - --------- - ------------------ ----- -------- ------------- ---- ------------- ----- -
这段代码会将有序列表的默认样式清除，并在每个列表项前面添加一个自定义图片和序号。
总结
使用 CSS Reset 后，列表样式可能会失效。为了解决这个问题，我们可以使用 :before 和 content 属性，或者自定义图片来重新设置列表样式。这些方法可以让我们更好地控制列表样式，使页面更加美观和易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658bf34aeb4cecbf2d142ad9