HTML网页文档结构中的列表标记自定义-html教程-PHP中文网

不能用 dl 实现“自定义列表”视觉效果，因为 dl 是语义容器而非视觉容器，仅表达术语–解释映射关系，其 dt/dd 结构受读屏软件等严格解析，不支持 list-style、start 等视觉控制属性；ul + ::marker 才是最简可靠的方案。

html网页文档结构中的列表标记自定义

为什么不能用 `dl` 实现“自定义列表”视觉效果

因为 dl 不是视觉容器，而是语义容器 —— 它只表达「术语–解释」的映射关系。浏览器、搜索引擎、读屏软件都按这个逻辑解析：dt 必须有内容，dd 必须紧跟其后，且不能脱离上下文独立存在。

常见错误现象：

把 dl 当作带缩进的 ul 用，结果屏幕阅读器读成“术语：苹果”，接着停顿两秒再读“解释：一种水果”，完全错乱
给 dt 加 list-style-type: none 没反应，因为该属性对 dt/dd 默认无效
想用 start 或 type 控制编号，发现这些属性根本不在 dl 的规范里

`ul` + `::marker` 是最简可靠的自定义符号方案

现代浏览器（Chrome 89+、Firefox 68+、Safari 15.4+）已原生支持 ::marker 伪元素，它专为替换列表项前缀而设计，语义清晰、可访问性好、无需额外 DOM 节点。

实操建议：

先用 list-style: none 清掉默认符号
再给 li::marker 设置 content，支持字符串、emoji、计数器（如 counter(list-item, lower-roman)）
若需图标，优先用内联 SVG 或字体图标（如 content: "→"; font-family: "iconfont"），避免 background-image 导致缩放失真
注意：::marker 不能设宽高或背景色，但可通过 color 和 font-size 控制颜色与大小

示例（绿色箭头 + 缩进对齐）：

ul.custom {
  list-style: none;
}
ul.custom li::marker {
  content: "→";
  color: #28a745;
  font-size: 1.1em;
}
ul.custom li {
  padding-left: 0.5em;
}