考试题必须用语义化编号，多页续编用start属性（如start="16"），嵌套小题用CSS counter-reset/increment，禁用value和手动序号，确保可访问、打印与动态更新。

考试题目必须用

，不能靠手动写“1.”“2.”——否则无法语义化、不可访问、打印错乱、后续也无法用 CSS 或 JS 动态控制题号样式或跳转锚点。

用 start 衔接多页/分卷题号

考试常分卷（如“第 I 卷”“第 II 卷”）或多页续编（上一页末尾是第 15 题，本页从第 16 题起），这时直接用 start 最干净：

• → 第一项显示为 “16.”，后续自动为 17.、18. ……
• start 值必须是整数；start="0" 合法（显示 “0.”），start="-5" 也合法（显示 “-5.”“-4.”），但部分旧浏览器可能 fallback 到 1
• 别写
  —— 浏览器会忽略并从 1 开始，start 只接受阿拉伯数字
• 若需“第 I 卷”这类文字前缀，start 不够用，得切到 CSS 计数器方案（见下一条）

用 CSS counter-reset 实现“第X题”“第X小题”嵌套

当题目结构含主干题 + 小题（如“1. 计算下列各式：（1）……（2）……”），原生

的 type 和 start 无法生成带文字前缀的嵌套编号，必须用 CSS 计数器：

• 外层
  上设 counter-reset: question;
• 每个主干题
• 上设 counter-increment: question;，再用 ::before { content: "第" counter(question) "题 "; }
• 小题用另一计数器：
  设 counter-reset: subquestion;，其
• 上设 counter-increment: subquestion;，::before 插入 "（" counter(subquestion) "）"
• 关键陷阱：counter-increment 必须写在要显示序号的元素上（通常是
• ），且父级
  必须有对应 counter-reset，否则 counter() 返回 0

避免用 value 属性手动指定题号

看似能跳到第 5 题，但它只影响当前项，后续项仍按 “5+1=6” 递增，极易导致编号断裂。更严重的是：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 屏幕阅读器可能读作“列表第 1 项（值为 5）”，造成语义混乱
• 打印时若某页被截断，value 无法自动对齐物理页码
• 动态加载新题（如“展开解析”）时，value 不会重算，必须 JS 手动遍历重设——而 counter-reset 是声明式、自动响应 DOM 变化的
• 真要跳题（如“第 10 题”后接“第 15 题”），应拆成两个独立
  ，分别用 start="10" 和 start="15"

兼容性与导出 PDF 的实际注意点

考试题文档常需导出 PDF 或适配高对比度模式，这时原生

比纯 CSS 伪元素更稳：

• reversed 属性在 Safari iOS 12.2 之前不支持，IE 完全不支持；若需倒序题号（如“倒计时式答题”），优先用 JS 调换
• 节点顺序，而非依赖 reversed
• PDF 导出工具（如 wkhtmltopdf）对 CSS counter() 支持不一，某些版本会漏掉 ::before 内容；若稳定性压倒一切，可服务端渲染为静态文本（即把 content 结果写死进 HTML），但失去动态更新能力
• 所有题干必须包裹在
• 内，禁止

  第1题

  —— 浏览器会忽略
  ，不编号也不计入计数器

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！