lang属性“继承”实为语义推断，非真实属性传递；子元素自身lang为空，仅在渲染/语音时向上查找最近显式声明的祖先lang值，故混排内容必须显式标注，否则导致朗读错、字体异常、拼写检查失效。
子元素为什么“继承”了lang却不是你想要的
HTML 没有属性继承机制，lang 是极少数被规范明确定义为“可继承”的全局属性之一——但它不是把值复制给子元素，而是浏览器在渲染或语音合成时，向上查找最近一个显式声明了 lang 的祖先（包括 ），并用那个值作为语义上下文。这意味着：<div lang="en"><p>Hello</p></div> 中的 <p></p> 本身 lang 属性为空，但它的语言上下文被推断为 en。
问题出在“推断”不可控：一段中文页面里嵌了个英文 <blockquote></blockquote>，你只在 上写了主语言，没给 <blockquote></blockquote> 显式加 lang="en"，结果它被当成中文处理——语音朗读错、拼写检查失效、字体 fallback 用中文字体渲染英文，字母挤成一团。
必须显式覆盖的三种典型场景
别指望“继承”能自动帮你区分混排内容。以下情况不手动写 lang，就一定会出问题：
-
<pre class="brush:php;toolbar:false;" lang="bash">curl -X POST</pre>—— 语法高亮、翻译工具、终端模拟器都靠这个识别代码语言；不写，bash被当作文本，高亮失效 -
<q lang="fr">Je suis français.</q>—— 引文语言错配，屏幕阅读器用中文引擎读法语，音调全乱 -
<code lang="en">useState—— IDE 插件或文档生成器依赖此标记做英文关键词高亮，否则当普通文本
这些节点哪怕嵌在 lang="zh-CN" 的 <main></main> 里，也必须自己带 lang。浏览器不会猜“这看起来像命令行”，它只认你写的值。
:lang() 伪类匹配失败，其实是 lang 值没传到目标元素
:lang(zh) 不是 CSS 魔法，它只匹配那些**自身或任意祖先有合法 lang 值且属于中文大类**的元素。常见失效不是选择器写错了，而是目标元素根本没获得语言上下文：
-
标签压根没设lang→ 所有后代失去推断源头，:lang()全部不触发 - 写了
xml:lang="zh-CN"但没写lang→ Chrome/Firefox/Safari 只认lang，xml:lang在 HTML5 中不参与匹配 - 子元素混排日文但没加
lang="ja"→<p>API 世界</p>里「世界」不会被:lang(zh)命中，除非整个<p></p>显式声明，或「世界」被包在<span lang="zh"></span>里 - 用了非法标签如
lang="ch"、lang="zh_cn"（下划线）→ 不符合 BCP 47，浏览器静默忽略，等同于没写
动态插入的 DOM 节点最容易漏掉 lang
React/Vue 组件、弹窗、Tooltip、第三方 SDK 注入的节点，默认没有 lang。SSR 渲染时可能正确，但 hydration 后或 JS 动态创建时，新节点的 lang 值是空的——这不是框架 bug，是 HTML 规范使然。
实操建议：
- 组件初始化时，读取
document.documentElement.lang，显式设置到新容器上：el.setAttribute("lang", document.documentElement.lang) - 对第三方注入节点，用
MutationObserver监听childList，发现新元素后补lang（需过滤 iframe、script 等非内容节点） - 避免在模板中写
<div lang="{{lang}}"> 却没做空值 fallback，上线后可能生成 <code><div lang="">，比不写还糟 <p>最常被忽略的一点：iframe 是独立文档上下文，其内部 <code>lang不继承父页，必须单独声明——哪怕只是个客服浮窗，也要确保它的存在。
