list-style: none 必须作用于 ul 或 ol 容器而非 li 元素，否则不生效；去除标记后需手动添加 padding-left 以保留缩进结构。
为什么 list-style: none 有时不生效
常见现象是加了 list-style: none，但小圆点还在——大概率是因为样式被覆盖，或者作用对象错了。列表项（）本身不渲染标记，真正控制序号/圆点的是父级 list-style: none 写在容器上，而不是 上。
另外注意继承关系：如果父元素用了 list-style: none，子列表（比如嵌套的
- 错误写法：
li { list-style: none; }（无效） - 正确写法：
ul, ol { list-style: none; } - 若用类名控制，推荐：
.no-bullet { list-style: none; }，然后加在
去除序号后，如何保留缩进结构
直接设 list-style: none 会同时干掉默认的左内边距（padding-left），导致列表项贴到左边，视觉上失去层级感。这不是 bug，是浏览器默认样式本来就把缩进和标记绑在一起。
要保留可读性，得手动补回间距：
- 最稳妥方式：
ul { list-style: none; padding-left: 1.5em; } - 如果用
rem更适配：ul { list-style: none; padding-left: 1.25rem; } - 避免用
margin-left替代，它会影响外边距塌陷逻辑，尤其在 flex/grid 布局里容易出偏移
list-style 的其他常用组合值
list-style 是复合属性，能一口气控制类型、位置和图像。日常去掉标记时，其实只动了 list-style-type，但写 none 是最直接的方式。
几个高频组合：
- 用自定义图标代替圆点：
list-style: none; background: url("arrow.svg") no-repeat left center / 12px; padding-left: 20px; - 序号改用字母（A/B/C）：
ol { list-style-type: upper-alpha; } - 彻底清空并禁用所有默认行为：
ul, ol { list-style: none; margin: 0; padding: 0; }（常用于重置或菜单组件）
在 CSS-in-JS 或框架里怎么处理
像 React + styled-components 或 Tailwind 这类方案，本质还是生成普通 CSS 规则，所以规则没变——只是写法位置不同。
- Tailwind 用户：直接用
list-none类，它等价于list-style: none；如需缩进，补pl-4（对应padding-left: 1rem） - styled-components：确保选择器命中的是
ul或ol，不是li；动态控制时，别把list-style写进li的插值里 - Vue 的 scoped style 下，如果子组件有列表，父组件的
list-style: none不会穿透，得在子组件里单独声明
实际项目里最容易漏的是嵌套列表的样式重置，以及去掉 list-style 后忘了补缩进——这两处一错，UI 就容易看起来“挤在一起”或者“层级消失”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
