css变量不能直接驱动多语言布局切换，必须在html[lang]选择器内声明并同时使用var()，因:lang()不创建作用域且与变量解析时机冲突；html[lang="xx"]规则需完整声明字体等属性，逻辑属性配合方向变量更稳妥。
CSS变量本身不能直接驱动多语言布局切换——必须配合html[lang]选择器在匹配元素上声明变量，否则var()引用会失效或 fallback 到初始值。
为什么:lang()里用var(--font-main)常不生效
浏览器解析var()发生在样式计算早期，而:lang()是运行时匹配机制，两者作用时机不一致。即使你在:lang(zh)里写了--font-main: "Noto Sans SC"，后续font-family: var(--font-main)仍可能取不到——因为变量未在该元素作用域内被显式声明。
-
:lang(zh)不是作用域容器，它不会“注入”变量到后代继承链 -
html:lang(zh) { --x: a; }和html[lang="zh-CN"] { --x: a; }行为不同：后者更可靠，且兼容性更好 - Chrome/Safari 对
:lang()中修改根变量的支持不一致，Firefox 基本忽略
真正起效的写法：在html[lang]规则体内同时声明变量和使用var()
变量必须落到能匹配到的元素（通常是html）上，并在同一规则块内被引用。这样var()才有确定的作用域。
html[lang="zh-CN"] {
--line-height: 1.7;
--text-spacing: 0.04em;
--font-main: "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
font-family: var(--font-main);
line-height: var(--line-height);
letter-spacing: var(--text-spacing);
}
html[lang="ar-SA"] {
--line-height: 1.9;
--text-spacing: 0.02em;
--font-main: "Tajawal", "Cairo", system-ui, sans-serif;
font-family: var(--font-main);
line-height: var(--line-height);
letter-spacing: var(--text-spacing);
}
- 每个
html[lang="xx"]块都必须包含完整的font-family声明，var()只是组织手段，不可省略 - 避免在
:root预设--font-main后指望它被:lang()覆盖——它不会被覆盖，只会被忽略 - 变量名如
--text-spacing纯属语义约定，换名不影响功能，但要保持命名一致性
RTL布局与逻辑属性配合变量更稳妥
对阿拉伯语、希伯来语等 RTL 语言，仅靠direction: rtl不够——margin-left、padding-right等物理属性不会自动翻转。此时变量可封装方向逻辑，但需搭配逻辑属性使用。
- 优先用
margin-inline-start代替margin-left，它会随dir或[lang]自动映射左右 - 若需兼容旧浏览器（如 IE11），可用 Sass 编译时生成
margin-left/margin-right，但纯 CSS 场景下必须手动为 RTL 单独写规则 -
html[lang="ar-SA"] { --dir: rtl; }这类变量只适合做标记，不能替代direction声明；真正起效的是direction: var(--dir)+ 同时定义逻辑属性
最容易被忽略的一点：所有html[lang]规则必须带html标签名，写成[lang="zh-CN"]或body[lang="zh-CN"]会导致匹配失败——语言属性在html上，不在body，也不应依赖继承。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
