问答列表正确结构是ol嵌套而非并列：所有大题共用一个ol，每道题为li，子问题ol必须嵌套在对应li内；li中禁用div直接子元素，避免dom自动修复导致语义错乱。

问答列表文字排版，核心不是“怎么加样式”，而是“结构写对了没”——ol嵌套错一层，编号就静默重置；li里塞个div，浏览器自动修复 DOM，视觉和语义全乱。

用 ol 嵌套控制题号层级，别并列写多个 ol

常见错误是每道题单独一个ol，比如：

<ol><li>第一题</li></ol><ol type="a"><li>(a) 子问题</li></ol>

这样第二组ol是全新列表，永远从 (a) 开始。正确做法是所有题目必须在同一个ol内，子问题ol必须作为li的内容嵌套进去：

• ol 包住全部大题（语义上表示“有序的问答序列”）
• 每道大题是一个 li，里面直接写题干文字
• 子问题用 ol type="a" 或 ol type="A"，且必须写在对应 li 标签内部（不能闭合 li 后再写）
• 需要三级编号（如 A → 1 → a），就严格三层嵌套：ol > li > ol > li > ol

子问题字母编号失效？先查 HTML 结构合法性

现象：子问题始终显示 (a)、(a)、(a)，不递增。这不是 CSS 没生效，而是浏览器根本没把它当子列表处理。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 打开 DevTools，看子 ol 是否真的在父 li 内部 —— 如果它被浏览器自动移到 li 外面，说明 HTML 结构非法（比如中间插了 p 或 div）
• li 允许直接放文本、span、a、p（HTML5 已允许），但不允许直接放 div 作为子元素；若需分组，把 div 放进 li 里，而不是和 li 并列
• 别依赖 start 属性来“修正”编号 —— 它只适合跨文档接续（如上份试卷最后一题是 5，本份从 6 开始），日常问答题编号断裂，99% 是嵌套结构错了

让编号带括号或前缀？优先用原生 ol + CSS，别急着上 counter

原生 ol 的可访问性、SEO 和屏幕阅读器兼容性远超手动计数器。除非你明确需要 “(1)”、“Question 2:” 这类定制格式，否则不用动 counter-reset。

• 要括号编号，用 ol { list-style-type: decimal; } 配合 li::marker { content: "(" counter(list-item) ")"; }（注意：必须保留原生 ol，否则计数逻辑断掉）
• 想统一加“答：”前缀，直接在 li 里写：<li>答：<span>这里是答案内容</span> </li>，比 CSS 伪元素更可控、更易维护
• 如果用了 counter，务必检查每个容器是否都声明了 counter-reset —— 漏掉一个，后续所有编号就错位，而且这种错误不报错，只静默失效

文字排版细节：缩进、行高、中英文混排

问答题不只是编号，文字本身也得可读。浏览器默认样式会干扰真实排版效果。

• 中文段落首行缩进必须用 text-indent: 2em，别用空格或  —— 后者不可缩放、不可复制、屏幕阅读器误读
• line-height 推荐用无单位值（如 1.75），避免固定像素在缩放时断裂；letter-spacing 用 em 单位（如 0.05em），保持比例稳定
• 中英文混排时，西文部分建议加 lang="en" 属性（如 <span lang="en">API</span>），否则中文标点间距、连字行为可能异常
• 别用 align 属性（如 <p align="center"></p>）—— 它已废弃，会触发 quirks 模式，CSS 解析可能异常

真正容易被忽略的是：结构合法性不报错，但会让编号、缩进、换行全部静默失效。写完先看源码里每个 ol 是否被包在 li 里，比调 CSS 重要得多。

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