<ol>语义正确但需重置默认样式：Chrome设padding-left:40px、Firefox用2.5em、Safari不同，必须显式设padding-left:0和margin:0；长文本换行对齐需用counter()+li::before绝对定位，li::marker更优但Safari≤16.4不支持。
用 <ol> 是语义正确且最省事的方案，但直接写就错位、换行不对齐、样式难控——问题不在标签本身，而在浏览器默认样式没清干净。
为什么 <ol> 写出来序号总飘在左边？
因为 Chrome 给 <ol> 默认加了 padding-left: 40px，Firefox 是 2.5em，Safari 又不同；margin 也各不相同。不显式重置，序号和文字永远无法精确对齐。
- 必须加
padding-left: 0或统一设成具体值（如1.5em） - 同时清掉
margin: 0，否则外边距会干扰布局 - 若想序号顶格、文字内缩，可用
text-indent: -1.5em配合padding-left: 1.5em - 错误写法：
<ol style="list-style-type: lower-alpha;">→ 序号左飘、文字缩进不一致 - 正确写法：
<ol style="list-style-type: lower-alpha; padding-left: 0; margin: 0;">
怎么让长文字换行后第二行对齐序号起始位置？
list-style-position: outside（默认）把序号放在 <li> 盒子外侧，内容换行时第二行只认 padding-left，和序号视觉脱节。要真正“序号+文字”像段落一样自然折行，得绕过原生机制。
- 放弃
list-style-type，用 CSS 计数器 +li::before -
ol上设counter-reset: item和list-style: none -
li设position: relative和padding-left: 2.5em（为序号留空间） -
li::before里用content: counter(item) "."+position: absolute; left: 0 - 多位数字对齐靠
width: 2em; text-align: right，避免 1. 和 10. 错列
li::marker 能不能直接用？
能，而且语义更干净、性能更好，但它在 Safari ≤16.4 中不支持——如果你的用户大量使用旧版 macOS/iOS，就得 fallback 到 li::before。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 启用方式：
li::marker { content: "Step " counter(list-item) ": "; color: #2563eb; } - 前提：父级
<ol>必须保留默认counter-reset: list-item（通常不用手动写） - 真正难的不是改编号内容，而是基线对齐：换了字体或
line-height后，vertical-align: middle或微调line-height往往比换编号类型更花时间 - Safari 兼容性差，且
::marker不支持背景、border 等复杂样式，真要加图标或背景色，还是得用::before
搜索结果这类带序号但不要数字的场景怎么处理？
语义上仍该用 <ol>（有天然顺序），但视觉上要隐藏编号——别用 display: none 或 visibility: hidden，那会破坏可访问性。
- 正确清空方式：
list-style: none+padding-left: 0+margin: 0 - 标题必须用
<h3>，URL 用<cite>，摘要用<p>或<div> - 给
<ol>加aria-label="搜索结果"，屏幕阅读器才能准确播报上下文 - 动态加载新结果时，整个
<ol>需包裹aria-live="polite"，否则新增项不会被朗读
最常被忽略的不是怎么加序号，而是清不干净默认 padding 和 margin；还有就是以为 ::marker 万能，结果在 Safari 里直接不显示——兼容性判断得看真实用户环境，不是看 Can I Use 数据表。
