JS修改document.documentElement.lang无效，因浏览器和辅助技术仅在初始解析时读取lang；需首屏HTML正确声明，SSR/SSG注入或整页刷新，同时同步更新dir属性。
单页面应用中仅用 JavaScript 修改 document.documentElement.lang 不会让屏幕阅读器、浏览器翻译或 :lang() 样式重新生效——它只是改了个属性值，DOM 已完成解析，没人重读。
为什么 JS 改 lang 后没效果
浏览器和辅助技术（如 NVDA、VoiceOver）只在初始 HTML 解析阶段读取 <html lang="zh-CN">。JS 执行时，语音引擎、翻译按钮、CSS 伪类都已锁定上下文。后续赋值 document.documentElement.lang = "en-US" 不触发任何重载逻辑。
- Chrome 翻译按钮不会出现或切换目标语言
- 屏幕阅读器仍用中文引擎朗读英文文案，发音错乱
-
:lang(zh-CN) { quotes: "「" "」"; }样式完全不匹配新值 - 搜索引擎抓取首屏 HTML，JS 后设的
lang对 SEO 零影响
真正有效的三种做法（按优先级排序）
必须在首屏 HTML 中就输出正确 lang，JS 只能配合文案更新，不能替代源头声明。
-
服务端渲染（SSR）项目：根据请求头
Accept-Language或用户登录态，在模板中直接注入，例如 Next.js 的<html lang={locale}>；Nuxt 使用useLocaleHead() -
静态生成（SSG）站点：为每种语言生成独立 HTML 文件（如
/zh/index.html、/en/index.html），lang硬编码进模板 -
纯前端 SPA（无 SSR/SSG）：语言切换时强制整页刷新，
window.location.href = "/en"；避免用outerHTML重写，ARIA 缓存清不干净且兼容性差
局部多语言内容必须同步更新 lang 属性
主 lang 切换后，所有显式带 lang 的子元素（如 <p lang="en">、<pre lang="bash">）若语义未变，需手动更新其 lang 值，否则它们仍按旧语言被处理。
立即学习“前端免费学习笔记（深入）”；
- 错误做法：
<html lang="en">+<p lang="zh">你好</p>→ 屏幕阅读器用英语引擎读中文，断音失败 - 正确做法：遍历
document.querySelectorAll('[lang]')，按新语言策略决定是否保留或更新每个lang值 - 特别注意：
<pre lang="bash">是非法写法——bash不是 BCP 47 语言标签，应改为lang="en"或留空
:lang() 样式匹配要小心大小写和精确性
CSS 的 :lang() 是严格匹配的伪类，不支持模糊继承或自动降级。
-
:lang(zh)只匹配lang="zh"，不匹配lang="zh-CN"或lang="zh-Hans" -
:lang(zh-CN)不会匹配lang="zh"，也不会匹配lang="zh-Hans" - 推荐策略：统一用
lang="zh-CN"，并写:lang(zh-CN), :lang(zh)双保险，或用属性选择器[lang|="zh"]匹配所有以zh开头的值
最常被忽略的点：语言切换按钮点击后，90% 的开发者只改了文案和 lang 值，却忘了 <html> 的 dir 属性也要同步更新（比如切到阿拉伯语必须加 dir="rtl"），否则输入框光标、Tab 顺序、标点挤压都会错乱。
