ul和ol默认带圆点或数字是因为浏览器内置样式表设定了list-style-type和padding-left；清除时需同时设list-style:none和padding-left:0，嵌套列表要显式重置，且优先用list-style-type:none保障可访问性。
为什么 ul 和 ol 总是带圆点或数字，即使没写样式？
因为所有浏览器都内置了 User Agent Stylesheet，默认给 ul 设 list-style-type: disc，ol 设 list-style-type: decimal，还会加 padding-left（通常 40px）。这不是你写的 CSS 生效了，是浏览器“自带的”。不显式覆盖，它永远在。
list-style: none 是最直接的清除方式，但要注意作用范围
只写 ul, ol { list-style: none; } 能去掉标记，但不会动 padding-left —— 这会导致列表项突然左贴边，破坏原有布局。常见错误就是只清样式、不调间距。
- 必须搭配重置
padding：比如ul, ol { list-style: none; padding-left: 0; } - 如果项目用 Flex/Grid 布局，有时连
margin也要清，避免和父容器外边距折叠 - 别用通配符
*一刀切：它会影响::before/::after伪元素的默认行为，调试时容易误判
遇到嵌套列表时，list-style 不继承，得显式处理
list-style 属性本身不继承，所以子 ul 或 ol 会恢复浏览器默认样式。你写了顶层 ul { list-style: none; }，但 ul ul 依然有圆点。
- 稳妥写法是用后代选择器：
ul, ul li ul, ul li ol, ol, ol li ul, ol li ol { list-style: none; padding-left: 0; } - 更简洁的现代写法（支持 IE11+）：
ul *, ol * { list-style: none; }，但注意它也命中li里的子元素，慎用于含自定义::marker的场景 - 若用 CSS-in-JS 或 Shadow DOM，需确保样式作用域覆盖到嵌套层级，局部重置可能失效
当需要保留语义但隐藏视觉标记，优先用 list-style-type: none 而非 display: none
display: none 会让整个 li 消失，破坏可访问性（屏幕阅读器读不到列表结构）；而 list-style-type: none 只隐藏标记，ul/ol 的语义和列表项顺序仍被保留。
- 导航菜单、卡片网格等场景，用
list-style-type: none+display: flex是标准组合 - 如果连
li的换行都不想要，改用display: inline或display: inline-flex，但别删li标签——语义不能丢 - 真要彻底移除列表语义，应重构 HTML，换成
div，而不是靠 CSS 强行“伪装”
实际项目里最容易漏的是嵌套层级的 padding 复位和可访问性边界——样式藏得越深，越要检查它是否还在被屏幕阅读器识别为列表。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
