在前端开发中，使用 CSS Reset 来消除浏览器默认样式，是一个常见的实践。然而，在使用 CSS Reset 的时候，常常会出现列表样式被重置，使得列表的标记（bullet）或数字变为默认的样式，从而影响页面的视觉效果。那么遇到这种问题我们该如何解决呢？下面，本文就为大家详细讲解。
1. 问题的表现
在使用 CSS Reset 后，通常会出现以下几种情况：
- 无序列表（
<ul>）的圆点样式被消除，变为空心圆点； - 有序列表（
<ol>）的数字样式被消除，变为默认数字样式。
列表样式问题通常会引起页面排版混乱，并影响页面的可读性和用户体验。下面我们来看看如何解决这些问题。
2. 解决方法
2.1 重置列表样式
我们可以在 CSS Reset 中对列表样式进行重新定义，这样就可以保持与浏览器一致的样式。以下是一个基本的重置样式：
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}上述样式中，list-style 属性将所有列表的标记（bullet 或数字）隐藏掉。
2.2 使用 ::marker 伪元素
CSS3 引入了 ::marker 伪元素，可以用来控制列表标记的样式，这种做法更为优雅。通过在样式表中添加以下内容，我们可以使重置的样式与浏览器默认样式对齐：
ul, ol {
margin: 0;
padding: 0;
}
li::marker {
margin-left: 10px;
}通过设置 margin-left 属性，我们可以为标记（bullet 或数字）增加间距，从而使其居中、美观。注意，::marker 伪元素只能应用于列表项（<li>）。
2.3 使用 background-image
我们还可以使用图片作为标记，从而使页面更具有个性和美感。通过以下样式：
-- -------------------- ---- ------- -- - ----------- ----- - -- -- - --------- --------- ------------- ----- -------------- ----- - -- --------- - -------- --- ------ ----- ------- ----- --------- --------- ----- -- ---- ---- ---------- ----------------- ----------------- ------------------ -
我们可以使用 background-image 属性为标记（bullet）增加图片，从而让列表更加美观。通过设置 position: absolute 属性，我们可以将图片定位在列表项的左侧，并通过 transform: translateY(-50%) 属性将其在父元素垂直居中。注意，这种做法仅适用于无序列表。
3. 总结
本文详细介绍了遇到 CSS Reset 引起的列表样式问题该如何解决。通过对标记的重新定义、使用 ::marker 伪元素、和使用 background-image 属性，我们可以让列表更加美观和整洁。这些技巧不仅会提高开发效率，还会让页面更加美观并提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647f860b48841e9894f26d7a