晋级表不能仅依赖<ol>自动编号，须用其作结构容器，CSS控制显示、伪元素手动标注轮次，Flex/Grid实现横向对位与箭头流向，数据属性标识逻辑关系，所有编号需固化为文本或JS生成以保障可访问性与打印可靠性。
用 <ol> 做晋级表，但别只靠它自动编号
HTML 的 <ol> 本身只负责“顺序”和“默认数字”，赛事晋级表里常见的“1→2→4→8→冠军”或“胜者进入下一轮”逻辑，它不理解。直接套用 <ol> + <li> 只能得到 1. 2. 3. 4. 这种线性编号，没法表达分支、轮次嵌套或胜负流向。
实际做法是把 <ol> 当容器结构用，靠 CSS 控制显示内容，再手动写入轮次信息：
- 外层
<ol>表示“轮次顺序”（如 第1轮、第2轮、半决赛、决赛） - 每轮内用
<li>包一组对战，里面放选手名、比分、晋级箭头等纯文本或图标 - 禁用默认序号：
ol { list-style: none; counter-reset: none; } - 用
::before伪元素手动插入“Round 1”“SF”这类标识，更可控
怎么让同一轮的两个选手并排、带胜负箭头
单纯用 <li> 是垂直堆叠的，晋级表需要横向对位（比如 A vs B → 胜者进下一轮）。不能依赖 <ol> 的内置行为，得用 CSS 布局：
- 给每个
<li>设display: flex，左右放两名选手，中间加<span>→</span>或 SVG 箭头 - 避免用
float：响应式下容易错位，flex或grid更稳 - 如果要支持“败者组”，同一轮可能有多个
<li>并列，这时外层用display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))更灵活 - 别在
<li>里塞<ol>做子轮次——语义混乱，CSS 难控制，改用独立的<section>或带 class 的<div>
动态更新时，<ol> 的 start 和 reversed 属性基本没用
有人想用 <ol start="4"> 表示四强，或 reversed 倒序显示决赛到小组赛——这会破坏可访问性和语义。屏幕阅读器会照读“4. 3. 2. 1.”，但用户看到的是“冠军、季军、殿军”，完全错位。
立即学习“前端免费学习笔记（深入）”；
-
start只影响数字值，不改变 DOM 结构或数据含义，无法表达“这一项是半决赛胜者” - 真正需要的是数据驱动：用
data-round="semifinal"、data-winner="true"这类属性，JS 读取后决定显示内容和样式 - 如果真要用序号，建议 JS 动态写入
textContent到<span class="round-badge">，而不是依赖<ol>的计数器
导出 PDF 或打印时，<ol> 编号经常错乱或消失
浏览器打印预览里，<ol> 的计数器常被重置，尤其嵌套或跨页时。晋级表一旦要存档或发给裁判，必须规避这个风险。
- 所有编号、轮次标识全部用真实文本写死，或由 JS 渲染后固化为
<span>，不要依赖 CSScounter() - 打印样式表中强制
ol, li { -webkit-print-color-adjust: exact; }，防止颜色/背景被过滤导致箭头不可见 - 如果用 CSS Grid/Flex 布局，加上
page-break-inside: avoid到每个轮次容器，避免“vs”拆到两页
晋级表的核心不是“有序”，而是“关系可视化”。<ol> 顶多当个语义化外壳，真正的结构靠 HTML 元素嵌套 + CSS 布局 + 数据属性撑住。漏掉任一环，后期增补轮次或导出时就会卡住。
