用 :lang() 切换根级 css 变量（如 --line-height）再由子元素继承，是真正解耦、可维护的方案；硬编码行高值会导致冲突、无法响应字体变化、难以适配深色模式与动态字号。
直接结论：用 :lang() 切换根级 CSS 变量（如 --line-height），再让文本元素通过 line-height: var(--line-height) 继承，是真正解耦、可维护的方案；硬编码不同语言的 line-height 值会重复、难同步、无法响应字体变化。
为什么不能只写 :lang(zh) { line-height: 1.8 } 这类固定值
这类写法看似简单，但实际埋了三个坑：
- 多个语言规则之间容易冲突，比如
:lang(zh) p和:lang(en) p都设了line-height，而某个p同时匹配两者（lang 属性继承+嵌套）时，层叠顺序难控 - 行高常需随字体大小联动（如中文字体大、需更大行距），固定数值无法自动缩放
- 后续加深色模式或动态字号调节时，所有
:lang()规则都得重写一遍，没法复用变量逻辑
正确做法：把语言和变量绑定在 :root 上
核心思路是让 :lang() 不直接改样式，而是切换根节点的变量值。这样所有子元素只需一次声明就能响应变化。
示例代码：
:root {
--line-height: 1.6;
}
:lang(zh) {
--line-height: 1.8;
}
:lang(ja) {
--line-height: 1.75;
}
:lang(ar) {
--line-height: 1.9;
}
p, li, blockquote {
line-height: var(--line-height);
}
注意点：
-
:lang()必须作用于:root或html才能影响全局变量；写成body:lang(zh)是无效的，因为变量作用域不在 body - 变量名统一用
--line-height（无单位数字），避免写成--line-height: 1.8em—— 带单位会导致计算异常，尤其在字体缩放时失准 - 如果页面有局部多语言混排（如一段英文嵌在中文段落里），
p:lang(en)仍可单独覆盖，但优先用变量继承，只在必要时微调
常见错误：lang 属性没设对，变量根本不会触发
:lang() 匹配完全依赖 HTML 中真实的 lang 属性，不是靠内容识别，也不是靠 meta 或 JS 注入后自动生效。
- 错误写法：
<p>Hello</p>—— 没设lang，:lang(en)规则完全不运行 - 正确写法：
<p lang="en">Hello</p>—— 子元素显式声明，才能被:lang(en)精准捕获 - SPA 场景下，用 JS 动态切换语言时，必须同步执行
document.documentElement.lang = 'en-US'，否则变量不会更新
进阶：结合字体大小做更自然的行高联动
单纯切变量还不够——中文字体通常比英文字体渲染更高，理想行高应随 font-size 自适应缩放。可以这样增强：
:root {
--font-size-base: 16px;
--line-height: 1.6;
}
:lang(zh) {
--font-size-base: 18px;
--line-height: 1.8;
}
body {
font-size: var(--font-size-base);
line-height: var(--line-height);
}
关键细节：
-
--line-height保持无单位，确保它始终是当前font-size的倍数 - 不要试图用
calc(var(--font-size-base) * var(--line-height))—— 浏览器不支持变量间乘法运算，会直接忽略整条声明 - 如果某段落需要独立字号（如标题），它仍会继承根变量，除非你显式重写自己的
--line-height，这点比硬编码更可控
最易被忽略的一点：CSS 变量的更新是同步的，但浏览器重绘可能延迟。如果通过 JS 切换 lang 后立刻读取 getComputedStyle(document.documentElement).getPropertyValue('--line-height')，有时会拿到旧值——别依赖这个做逻辑判断，样式本身一定会生效，只是 JS 读取时机要小心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
