:lang()不响应document.documentelement.lang赋值，因其匹配在html解析完成时固化，js修改lang属性不触发样式重计算；需用class控制语言切换并确保字体声明顺序正确。
为什么:lang()不响应document.documentElement.lang赋值
:lang()不是监听器，它在 HTML 解析完成时就固化了匹配结果。浏览器把语言信息当作静态元数据存进渲染树，后续 JS 修改 document.documentElement.lang 只是改 DOM 属性，不触发重排、重绘，更不会重建语言上下文。
常见错误现象：
- 页面加载后执行
document.documentElement.lang = "ja"，但:lang(ja) { color: red; }样式完全没生效 - 屏幕阅读器仍用中文朗读，Chrome 地址栏“翻译成日语”按钮没出现
-
getComputedStyle(document.body).color返回旧值，不是红色
根本原因：CSS 伪类计算发生在样式计算阶段（style recalc），而该阶段只依赖初始解析结果；运行时变更 lang 属性不会触发 style recalc。
:lang()匹配失败的三个硬性前提
即使你写了 :lang(zh)，也必须同时满足以下三点，否则它就是个摆设：
-
lang属性必须写在目标元素或其任意祖先上（推荐直接写在），且不能被中间某层的lang=""或lang="und"中断继承 -
lang属性值必须符合 BCP 47 标准格式，如zh-CN、en-US，zh_CN或Chinese全部无效 -
:lang(zh)和lang="zh-CN"能匹配，但:lang(zh-CN)不会匹配lang="zh-Hans"—— 它们是不同层级的前缀匹配，不能混用
验证方法：打开开发者工具 → 选中目标元素 → 查看「Computed」面板里的 language 字段，它显示什么，:lang() 就按什么匹配。
动态语言切换该用什么替代方案
别和 :lang() 较劲。真实项目里，语言切换应走 class 控制路径，而不是依赖语言属性重算：
- 用
document.documentElement.setAttribute("class", "lang-ja")替代lang属性赋值 - CSS 写成
html.lang-ja p { font-family: "Hiragino Kaku Gothic Pro"; } - 所有带语义的子元素（如
<blockquote lang="fr"></blockquote>）也要同步更新自己的lang属性，否则屏幕阅读器和翻译引擎仍按旧语言处理 - 如果必须保留
:lang()用于字体声明，那就只在首屏 HTML 里写死，靠服务端或构建时生成多语言版本
SPA 框架里尤其要注意：React/Vue 的 JSX template 编译可能过滤掉 lang 属性，尤其是写在自定义组件上时，最终 HTML 根本没有该属性。
字体声明顺序错，:lang()再对也没用
就算 :lang(zh) 匹配成功，字体还是不生效——大概率是 font-family 顺序写错了：
- 中日韩字体必须放在最前面，西文字体（如
system-ui、sans-serif）必须放最后兜底 - 绝不能写成
font-family: sans-serif, "PingFang SC";——sans-serif会立刻接管，后面字体全被跳过 - 混合内容（如
<p>Hello世界</p>）必须拆成内联元素并分别标注lang：Hello<span lang="zh">世界</span> - 不同语言要用独立字体栈：
:lang(zh)、:lang(ja)、:lang(ko)各自声明，不能共用同一串font-family
最隐蔽的坑：用户系统没装你指定的字体，而 fallback 到的 sans-serif 在 macOS 是 Helvetica，在 Windows 是 Arial，它们对日文/韩文支持极差，结果全是方块 —— 这时候你以为是 :lang() 失效，其实是字体链崩了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
