lang属性不能被“覆盖继承”，只能显式声明覆盖；浏览器语言推断是向上查找最近显式lang值，而非dom继承；lang=""表示未知语言而非清空，lang="und"才强制中断推断链。
lang属性本身不能被“覆盖继承”，只能被显式声明覆盖
HTML 中的 lang 属性没有 DOM 层级的继承机制，所谓“继承”是浏览器在语言推断时向上查找最近显式声明的 lang 值。因此，你不需要、也无法“覆盖继承”，只需要在目标元素上写明自己的 lang 值，它就会生效并屏蔽祖先的推断结果。
常见错误是以为删掉父级 lang 或加 lang="" 就能“清空继承”——其实只要没显式声明，浏览器仍会继续向上找；而 lang="" 是合法值（表示语言未知），不是“无语言”。
-
lang="zh-CN"写在上 → 所有未声明lang的后代都按中文处理 -
<div lang="en"><p>hello</p></div>→<p></p>的语言被推断为en（因父级显式声明） -
<div lang="en"><p lang="ja">こんにちは</p></div>→<p></p>以自身lang="ja"为准，en被忽略
为什么用 lang="und" 比 lang="" 更可靠
lang="" 表示“语言未声明”，但部分 AT 工具或浏览器仍可能 fallback 到父级或系统语言；而 lang="und"（W3C 定义的“未确定语言”）是明确语义，强制中断语言推断链，避免歧义。
例如：<blockquote lang="und"><p>Some code snippet</p></blockquote> 可防止屏幕阅读器用中文语音朗读英文代码片段。
- 不要用
lang="none"：不是标准值，会被忽略 - 不要依赖 JS 删除属性来“取消语言”：
el.removeAttribute("lang")后，浏览器仍会向上查找 - 动态切换时，直接设
el.lang = "fr"即可，无需先清空
CSS ::lang() 伪类不触发继承，只匹配已声明的值
::lang(en) 只匹配那些**显式写了 lang="en"（或其子类型如 en-US）** 的元素，不会匹配靠推断得到语言的元素。这意味着你不能用它“选中所有被推断为英文的段落”——必须手动加 lang 属性。
典型误用：p::lang(en) { quotes: "«" "»"; } 若 <p>Hello</p> 没写 lang，即使它被推断为英文，该规则也不生效。
- 想统一控制某类内容的语言样式？先批量加
lang属性，再用::lang() -
::lang()支持连写：::lang(zh-CN, ja, ko)匹配任一 - 它不影响实际语言推断，只是选择器层面的匹配
SPA 中动态更新 lang 容易漏掉的两个地方
单页应用切换语言时，常只改 document.documentElement.lang，但以下两类节点容易遗漏：
- 服务端渲染（SSR）注入的静态文本块：它们在 HTML 中已带
lang，JS 不会自动同步 - 第三方组件内嵌的文本容器（如富文本编辑器输出、Markdown 渲染结果）：这些节点往往由库生成，不响应全局
lang变更
解决办法不是监听 lang 变化去遍历 DOM，而是：在语言切换时，用 document.querySelectorAll("[data-lang-scope]") 这类约定 selector 主动定位需更新的区域，并显式设置 .lang 属性。
真正麻烦的从来不是怎么写 lang，而是怎么让所有动态插入的文本节点，在创建那一刻就带上正确的 lang 值——这需要框架层或组件层的约束，而非靠 DOM 继承幻想。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
