sub和sup仅适用于单层、无运算、顺序固定的语义标记，如an、x2、log10x；涉及分数、根号、求和、积分或自动缩放括号时必须用MathML或KaTeX。
数学公式里哪些能用 sub 和 sup，哪些不能
它们只适合单层、无运算、顺序固定的标记：比如 a<sub>n</sub>、x<sup>2</sup>、log<sub>10</sub>x。一旦涉及分数、根号、求和号 ∑、积分 ∫、括号自动缩放，sub/sup 就完全失效。
常见误用包括：x<sup>2</sup><sub>i</sub>（本意是 xᵢ²，但渲染成 x²i）；<sub><sup>2</sup></sub>（非法嵌套，HTML 不允许）；a<sup>n+1</sup> 拆成 a<sup>n</sup>+1（语义断裂，变成 “aⁿ + 1” 而非 “a 的 n+1 次方”）。
- ✅ 正确：先
sub后sup→x<sub>i</sub><sup>2</sup>渲染为 xᵢ² - ✅ 正确：质量数左上角 →
<sup>14</sup>C - ❌ 错误：电荷写成
<sub>H<sup>+</sup></sub>—— H⁺ 本身无下标，应直接写H<sup>+</sup>
为什么 sub/sup 渲染失效，不是标签没写对
它们默认就生效，所谓“没效果”几乎全是外部干扰：
- 全局 CSS 重置了
vertical-align，比如 Normalize.css 或 Ant Design 的 reset 会设sup, sub { vertical-align: baseline; } - 父容器设置了
line-height: 1或font-size: 0，压制了子元素缩放 - 富文本编辑器或 CMS 的 XSS 过滤未放开
<sup></sup>/<sub></sub>，保存后标签被删 - 手动给
<sup>加style="vertical-align: super"—— 多此一举，还可能和行高冲突
查是否失效最直接的方法：打开开发者工具，看 computed 样式里 vertical-align 是不是 super 或 sub，而不是 baseline。
立即学习“前端免费学习笔记（深入）”；
什么时候必须用 sub/sup，而不是 CSS
只有内容本身具备明确下标/上标语义时才该用，否则就是语义污染：
- 化学式原子个数：
H<sub>2</sub>O、SO<sub>4</sub><sup>2−</sup>（注意电荷用 Unicode 减号 U+2212，不是 ASCII -） - 数学幂次或索引：
x<sup>2</sup>、a<sub>n</sub>、log<sub>10</sub>x - 脚注编号：
参见文献<sup>3</sup>（不加括号、不加点） - 商标符号：
TM<sup>™</sup>（™ 是符号，不是年份）
别写 ©<sup>2025</sup> 或 <sub>用户协议</sub> —— 年份和说明文字没有下标/上标语义，读屏器会念成“版权 上标 二零二五”，干扰理解。
嵌套顺序错一位，渲染就全乱
浏览器按 HTML 树顺序解析，不是按视觉位置推算。顺序错了，语义和显示都崩：
- 正确：
SO<sub>4</sub><sup>2−</sup>→ 硫酸根离子，基团先写完整，再整体加电荷 - 错误：
x<sup>2</sup><sub>i</sub>→ 渲染成 x²i，不是 xᵢ² - 错误：
<sub><sup>2</sup></sub>→ 非法嵌套，HTML 不允许，部分浏览器容错但语义丢失
真正复杂的公式，比如带分式、矩阵、自动缩放括号的表达式，sub/sup 压根撑不住 —— 得用 MathML 或 KaTeX，sub/sup 只能当轻量语义锚点用。
