该用 dl 而不是 ul 或 ol 时：仅当呈现「术语+解释」或「字段名+值」这类键值对关系，如用户资料页「姓名：张三」、FAQ问答；ul/ol 无法传达定义语义，会导致屏幕阅读器丢失上下文。
什么时候该用 dl 而不是 ul 或 ol
当你在写「术语+解释」或「字段名+值」这类成对结构时，dl 是唯一语义正确的选择。比如用户资料页的「姓名：张三」「邮箱：zhang@example.com」，或者 FAQ 中的问答——用 ul 或 ol 套两层 li 看似能实现，但屏幕阅读器会读成“列表项、列表项”，丢失“这是定义”的上下文。
常见误用：
- 用
ul+ 两个li模拟「标题/内容」，其实是dt/dd的职责 - 把导航菜单写成
dl，因为dl不代表「可点击项集合」，它不带交互语义 -
dt后没跟dd，或dd单独出现，HTML 验证会警告，部分辅助工具可能跳过或误读
list-style-type 的取值限制与兼容性坑点
list-style-type 不是所有值都能混用。比如 upper-roman 在 ul 上无效（浏览器忽略），只对 ol 生效；反过来 square 在 ol 上虽不报错，但多数浏览器仍按数字渲染，实际不起作用。
几个关键事实：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
decimal、lower-alpha、upper-roman等数值/字母类只推荐用于ol -
disc、circle、square是ul的安全选项，none两者都支持 -
cjk-ideographic（中文一二三）在 Safari 15.4+ 和 Chrome 102+ 才稳定支持，旧版直接回退为decimal - 用
list-style复合属性时，顺序必须是list-style-type list-style-position list-style-image，错序可能导致部分值被丢弃
用 background-image 替换项目符号时必做的三件事
比起 list-style-image，用 background-image 控制图标更可靠（支持缩放、定位、多图层）。但漏掉任一环节，图标就容易错位或重复：
- 先设
list-style-type: none，否则默认圆点和背景图会叠加显示 - 给
li加padding-left（至少比图标宽多 4px），否则文字会盖住图标 - 用
background-size显式声明尺寸，避免高分屏下图标糊掉；background-repeat: no-repeat必须写，不然小图标会横向铺满
示例片段：
ul.icon-list li {
list-style-type: none;
background: url('check.svg') no-repeat left center;
background-size: 18px;
padding-left: 26px;
}
移动端列表布局中容易被忽略的缩进问题
桌面端看着正常的 ul 或 dl，在 iOS Safari 或 Android Chrome 里常出现文字贴边、图标截断——根本原因是浏览器对 ul/ol 的默认 padding-left 在不同引擎下不一致，且某些 WebView 会强制重置。
稳妥做法：
- 所有列表容器统一加
padding-left: 0，然后由li或dd自行控制缩进 -
dl中若需dt/dd并排，别依赖浏览器默认缩进，改用display: grid或flex，并设grid-template-columns: max-content 1fr - 测试时真机连上 Safari Web Inspector，看 computed styles 里的
padding-left实际值，别信模拟器
语义和样式解耦这事，说起来简单，但一旦嵌套两层以上或加了 flex/grid，li 的 margin、padding、list-style-position 就容易互相打架。动手前先用浏览器 devtools 折叠掉所有 CSS，确认 HTML 结构本身是否已表达清楚逻辑关系——这才是最不容易翻车的起点。
