list-style: none 能彻底去掉圆点且基本不影响可访问性，但需配合 padding-left: 0 和 margin-left: 0 以统一浏览器默认缩进；仅替换标记类型时应只改 list-style-type；用伪元素模拟时须手动处理定位、缩进与多行对齐。
list-style: none 能彻底去掉圆点但可能影响可访问性
直接写 list-style: none 是最常用也最有效的去除圆点/数字的方式，它会同时清空 list-style-type、list-style-position 和 list-style-image。但要注意：屏幕阅读器仍会把 <ul></ul> 或 <ol></ol> 当作列表处理，语义没丢，可访问性基本不受影响——真正的问题是，如果后续用伪元素或背景图模拟自定义标记，却忘了加 aria-label 或 role="listitem"，反而会破坏语义。
推荐写法：
ul, ol {
list-style: none;
padding-left: 0;
margin-left: 0;
}
为什么加 padding-left: 0 和 margin-left: 0？因为不同浏览器对列表的默认缩进不一致，比如 Chrome 给 <ul></ul> 默认 padding-left: 40px，而 Safari 可能是 margin-left: 40px，不重置会导致布局错位。
只改圆点类型别碰 position 和 image
如果只是想换掉圆点（比如换成短横线或箭头），但保留缩进逻辑，就别用 list-style: none，而是精准控制 list-style-type：
-
list-style-type: disc（实心圆点，<ul></ul>默认） -
list-style-type: circle（空心圆圈） -
list-style-type: square（方块） -
list-style-type: none（完全隐藏） -
list-style-type: "→ "（支持字符串，但兼容性差，仅现代 Chrome/Firefox）
注意：list-style-position 控制标记在文本内还是外（inside / outside），改它会影响换行行为；list-style-image 加自定义图标时，图片加载失败会回退到 list-style-type，所以建议始终配一个兜底类型。
用伪元素替代时必须手动处理缩进和间距
当用 ::before 模拟标记（比如图标字体或 SVG），list-style 已失效，缩进得自己算：
ul.custom li {
position: relative;
padding-left: 24px; /* 为伪元素留空间 */
}
ul.custom li::before {
content: "•";
position: absolute;
left: 0;
top: 0.2em;
}
常见坑：
- 没设
position: relative在li上，::before会相对整个ul定位 -
top值写死像素，换字体大小后标记上下偏移 - 多行文本时，第二行顶到伪元素下面，没加
line-height或vertical-align对齐
reset.css 或 normalize.css 里 list-style 不一定清干净
像 modern-normalize 只重置了 list-style-type 为 none，但没动 padding 和 margin；而老版 reset.css（Eric Meyer）虽然清了内外边距，但可能过度重置导致嵌套列表丢失层级感。实际项目中，最好单独检查目标元素的 computed styles，别假设“用了 reset 就万事大吉”。
最稳妥的做法，是在组件级 CSS 里显式声明：
.nav-list, .tag-list {
list-style: none;
margin: 0;
padding: 0;
}
复杂点在于：当列表用于导航、标签云、侧边栏等场景时，视觉层级和键盘焦点顺序必须和 DOM 层级一致，这时候哪怕去掉了圆点，也不能为了“扁平”把 <ul><li></ul> 全替换成 <div> —— 那才是真伤可访问性。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
