:lang()选择器不自动响应系统语言变化，需javascript设置document.documentelement.lang后才生效；它仅静态匹配dom中已存在的lang属性值，且受字体声明结构、继承规则和系统字体可用性约束。
:lang() 选择器本身不会自动响应系统语言变化，它只匹配 HTML 中已存在的 lang 属性值。要“根据系统语言自动切换样式”，必须先用 JavaScript 设置正确的 lang 属性，:lang() 才能生效。
为什么直接写 :lang(zh) 不会随系统语言变而变
浏览器从不读取 navigator.language 并自动给 加 lang 属性。:lang() 是纯静态匹配器：它只看 DOM 元素是否带有对应 lang 属性，且值是否满足前缀匹配规则。如果你的 一直没改，那 :lang(zh) 永远不触发，哪怕用户系统是简体中文。
- 常见错误：在 CSS 里写了
:lang(zh) { font-family: "PingFang SC"; }，但 HTML 根节点仍是→ 样式完全不应用 - 更隐蔽的问题：用户系统是
zh-HK，你只写了:lang(zh-CN)，而没加:lang(zh)或:lang(zh-HK)→ 匹配失败 - 注意大小写：属性值
lang="ZH"不会被:lang(zh)匹配（尽管部分浏览器宽松处理，但不可依赖）
必须手动设置 document.documentElement.lang
这是整个流程最关键的一步。CSS 的 :lang() 只有在 DOM 的 lang 属性被真实更新后，才会重新计算并应用样式。
- 不要只改
——:lang()可以匹配任意带lang的元素，但无障碍、字体回退、伪元素引号等行为严重依赖上的lang - 推荐写法：
const userLang = navigator.language || navigator.userLanguage; document.documentElement.lang = userLang.split('-')[0]; // 得到 zh / en / ja - 但别止步于此：需 fallback 到默认语言（如
en），并处理非法值（如zh-Hans→ 映射为zh） - 务必在 DOM 加载完成（
DOMContentLoaded）后执行，否则可能被后续脚本覆盖
:lang() 字体声明的三个硬约束
即使 lang 属性设对了，字体仍可能不按预期显示——问题常出在 font-family 声明结构上。
- 每条
:lang()规则里，font-family必须显式包含该语言强支持的字体，且排在最前：:lang(zh) { font-family: "PingFang SC", "Hiragino Sans GB", sans-serif; } :lang(ja) { font-family: "Hiragino Kaku Gothic Pro", "Yu Gothic", sans-serif; } - 不能把
sans-serif放最前，否则它会直接接管，后面的语言专用字体全被跳过 - 避免跨语言共用同一字体链：中日韩字符集重叠但渲染差异大，混写会导致假名/汉字/谚文宽度错乱或字形降级
- Chrome 和 Safari 对多字体链的解析逻辑不同，建议用
font-family工具（如 FontDrop）验证各字体在目标系统是否实际可用
混合内容下 :lang() 生效的边界条件
页面不是全站单语言时，子元素语言可能和根节点不一致——这时仅靠 html:lang(zh) 不够。
- 必须在具体元素上显式声明
lang：<p lang="ja">こんにちは</p>，否则p:lang(ja)不匹配 -
:lang()支持继承，但只继承最近的父级lang值；如果父级是lang="zh"，子<span></span>写了lang="en"，那该 span 就走英文规则 - 不要依赖
:lang(zh)同时覆盖zh-CN、zh-TW、zh-HK—— 虽然规范允许前缀匹配，但某些旧版 Edge 或 WebView 表现不稳定 - 更稳妥的写法是组合使用：
html:lang(zh), html:lang(zh-CN), html:lang(zh-TW), html:lang(zh-HK) { font-family: "Noto Sans CJK SC", sans-serif; }
真正容易被忽略的点是：字体链里每个字体都得在用户系统上存在或能被 Web Font 正确加载；而 :lang() 本身不触发字体下载，它只是告诉浏览器“该用哪个字体列表”——如果列表里全是空名，最终还是会回退到 sans-serif，导致日文显示成方块。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
