CSS 列表样式：别再让 ul 和 ol 默默“裸奔”了

你有没有写过这样的 HTML：

<ul>
  <li>买咖啡</li>
  <li>回邮件</li>
  <li>改完页面 footer</li>
</ul>

然后一刷新，发现列表项前面是默认的实心圆点——不难看，但也不属于你。它像借来的衣服，不合身，也看不出是谁在穿。

CSS 列表样式，不是“加个装饰”的边角料功能，而是控制信息节奏、暗示层级关系、甚至影响可访问性的基础信号系统。可惜很多人只记得 list-style-type: none，删掉符号就以为搞定了，结果留下一堆没视觉锚点、缩进混乱、屏幕阅读器念得磕磕绊绊的列表。

我们从三个真实痛点出发，把列表样式真正用起来。

一、符号 ≠ 装饰：选对 list-style-type 是在传递语义

disc、circle、square 看似只是换换圆点形状，其实暗含逻辑权重。
比如在操作指南里，用 square（□）比 disc（●）更显“待执行”，视觉上更“可点击”；而 circle（○）常用于非强制步骤，带点留白感——这不是玄学，是多年 UI 实践沉淀下来的微交互直觉。

数字列表也一样。decimal（1, 2, 3）适合线性流程；lower-alpha（a, b, c）更适合并列子项（比如“a. 字体大小；b. 行高；c. 字重”）；而 lower-roman（i, ii, iii）天然带点文档感，用在法律条款或章节编号里，用户会下意识放慢阅读节奏。

关键提醒：list-style-type 对屏幕阅读器有直接影响。设成 none 后，VoiceOver 或 NVDA 仍会读出“list with 3 items”，但失去序号信息——如果这是步骤说明，用户可能根本不知道当前是第几步。真要隐藏视觉符号，优先考虑 list-style: none + 手动添加伪元素计数，而非粗暴砍掉语义。

二、自定义符号？别急着用图片或背景图

看到“想用箭头/图标/emoji 做列表标记”，第一反应不是切图、不是加 background-image，而是试试 ::marker。

它专为列表标记而生，原生支持颜色、字体、大小，还能继承父级文字样式：

li {
  color: #333;
}
li::marker {
  content: "→ ";
  color: #007bff;
  font-weight: bold;
}

这段代码让每个 <li> 前面出现蓝色箭头，且自动对齐文本基线——不用算 padding-left、不用调 vertical-align。更重要的是，::marker 可以响应 :hover（仅限部分浏览器，但主流已支持），还能和 counter() 配合生成动态编号：

ol {
  counter-reset: step;
}
ol li {
  counter-increment: step;
}
ol li::marker {
  content: "Step " counter(step) ": ";
  color: #555;
}

输出效果：
Step 1: 初始化配置
Step 2: 连接数据库
……
干净、可控、无额外 DOM。

三、缩进与对齐：list-style-position 决定呼吸感

默认 list-style-position: outside，符号在内容框外，文本左边缘整齐——但当列表项换行时，第二行文字会直接顶到左边距，阅读断层明显。

换成 inside，符号挤进内容框内，文本整体左对齐，换行后缩进一致。不过要注意：inside 会让 padding-left 失效（因为符号已占位），此时该用 text-indent 微调首行缩进。

更务实的做法是放弃依赖内置缩进，用 padding-inline-start 显式控制：

ul, ol {
  padding-inline-start: 1.5rem; /* 统一左侧留白 */
}
ul li::marker,
ol li::marker {
  font-size: 0.9em;
}

这样无论符号多宽、换几行，视觉节奏都稳得住。顺便说一句：padding-inline-start 比 padding-left 更健壮，自动适配 RTL 语言（如阿拉伯语），不用额外写 [dir="rtl"]。

最后一个容易被忽略的细节：嵌套列表的样式隔离

多层菜单、复杂文档目录，常出现 ul > li > ul > li 套娃。如果只写一条 ul li::marker { content: "• "; }，所有层级都变成黑点，完全丧失结构提示。

解法很简单：用选择器精度分层定义：

ul { list-style: none; }
ul > li::marker { content: "— "; }
ul > li > ul > li::marker { content: "◦ "; }
ul > li > ul > li > ul > li::marker { content: "▪ "; }

符号由实心破折号 → 空心圆圈 → 实心小方块，逐层变轻、变小、变细——眼睛能顺着符号“下潜”，大脑自然理解层级深度。

列表不是排版的句号，而是信息流的逗号、分号、冒号。它不喧宾夺主，但缺了它，内容就失了标点节奏。

下次写列表前，花十秒问自己：
这个符号是在告诉用户“这是步骤”，还是“这是选项”，抑或“这是补充说明”？
它的位置，是否让长文本依然易扫读？
它的样式，是否在暗中帮屏幕阅读器用户理清顺序？

样式从来不是贴纸，而是语言的一部分。