list-style-type失效主因是display非list-item、被list-style简写覆盖、list-style-image优先、布局干扰（如flex/grid）或DOM结构不合法（如ul下非li子元素）。
改了 list-style-type 没反应？不是 CSS 没生效，大概率是浏览器没按你预期解析结构，或者样式被更高优先级规则覆盖了。列表样式调试的关键不在“怎么写”，而在“怎么验证它真在起作用”。
为什么 list-style 设置后项目符号不显示？
最常见原因是父容器或自身设置了 display: flex 或 display: grid —— 这会让 li 失去默认的块级列表项行为，list-style 直接失效。另一个高频坑是用了 ul 但子元素不是 li，比如直接塞了 div 或文本节点，浏览器会忽略这些“非法子元素”，导致整个列表渲染异常。
- 检查 DOM 结构：在 Elements 面板里确认
ul或ol下**只有li**（dl同理，只接受dt/dd） - 查 computed 样式：在 Computed 面板搜
list-style，看实际计算值是不是none或空，再往上点箭头定位到哪条规则覆盖了它 - 临时禁用 flex/grid：给
ul加display: block !important测试是否恢复符号，确认是不是布局模式干扰
list-style-image 图片不加载或错位怎么办？
list-style-image 对路径敏感，且不支持 background 相关属性（比如 background-size）。图片加载失败时，浏览器会悄悄 fallback 到 list-style-type，你可能根本意识不到图没出来。
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
- 路径必须相对 HTML 文件，不是 CSS 文件；用绝对路径更稳，比如
list-style-image: url('/assets/bullet.svg'); - 图片尺寸无法缩放，太大就撑开行高，太小就看不清；建议用 SVG 或控制在 12×12px 以内
- 位置难调：
list-style-position: inside会让符号进入文本流，但和文字基线对不齐；更可靠的方式是list-style-type: none+li::before自定义，用vertical-align和margin-right精控
用 ::before 自定义符号时，为什么屏幕阅读器读不出来？
因为 ::before 是纯视觉层，内容不进 DOM 树，也不进可访问性树。如果你删掉了 list-style-type 又没留语义，辅助技术就只剩“一段普通文本”，丢失了“这是列表项”的上下文。
- 必须保留
li元素本身，不能用div模拟；role="listitem"是补救手段，但不如原生li可靠 - 如果用
content: "•"，Unicode 符号如\2022比纯字符更稳定；避免用图标字体，某些读屏软件不识别 - 加
aria-label不解决本质问题——列表结构语义比单个标签更重要；优先确保ul/ol包裹正确，再叠加视觉定制
真正卡住人的往往不是语法不会写，而是改完之后不知道该去哪看“它到底有没有生效”。Computed 面板里的 list-style 行、DOM 结构是否干净、以及是否意外触发了 display 模式切换——这三个点查完，90% 的列表样式问题就定位到了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
