浏览器中lang属性不继承，仅通过向上查找最近显式声明的lang祖先（含<html>）确定语言上下文；需用element.closest("[lang]")?.lang || document.documentElement.lang获取实际生效值，:lang()伪类才是验证语言处理的可靠方式。
浏览器开发者工具里看不到“继承的lang”
HTML 没有属性继承机制，lang 也不是靠 DOM 层级复制下来的值。你在 DevTools 的 Elements 面板里点开一个 <p>，即使它父级写了 lang="zh-CN"，你也不会在该 <p> 的属性列表里看到 lang——它压根没被“继承”过去。
所谓“继承”，是浏览器在需要时（比如语音合成、拼写检查、字体回退）向上查找最近一个显式声明了 lang 的祖先元素（包括 <html>），然后用那个值作为当前上下文。这个过程不改变 DOM 结构，也不写入元素自身属性。
所以别指望右键“Edit as HTML”或看 Attributes 面板能确认语言是否生效。
用 JavaScript 查当前元素的语言上下文
要真正知道某个元素被浏览器当成什么语言处理，得调用 element.lang —— 它返回的是该元素**自身声明的值**；而语言上下文（即实际生效的语言）需手动向上查找：
立即学习“前端免费学习笔记（深入）”；
-
element.lang：只读取元素自身的lang属性值，没写就是空字符串 -
element.closest("[lang]")：找到最近带lang属性的祖先（含自身），再取它的lang值 - 注意：
<html lang="zh-CN">是兜底项，closest能命中它
简短示例：
const p = document.querySelector("p");
const langContext = p.closest("[lang]")?.lang || document.documentElement.lang;
console.log(langContext); // 输出实际起作用的语言标签，如 "zh-CN"
:lang() 伪类匹配结果最能反映真实语言上下文
CSS 的 :lang(zh) 是唯一能验证“浏览器是否真把这段内容当中文处理”的方式。它不依赖元素有没有显式 lang，而是基于语义推断逻辑匹配。
实操建议：
- 写一条高对比度测试样式：
p:lang(zh) { outline: 2px solid red; } - 刷新页面，看哪些
<p>被框红——被框中的，说明浏览器已识别其语言为中文（无论它自己有没有lang） - 如果没框中，大概率是
<html>没设lang，或值非法（如lang="ch"、lang="zh_cn"）
容易忽略的关键点
真正影响语言处理的不是“有没有继承”，而是三件事是否同时成立：
-
<html>标签上写了合法的lang值（小写+连字符，如zh-CN） - 局部混排内容（如英文引文、日文术语）必须显式加
lang，不能指望<html>一劳永逸 - 表格单元格、
<pre>、<blockquote>这些语义容器，lang必须直接写在它们自己身上，父级设置无效
动态改 document.documentElement.lang 只影响后续新创建的元素，已渲染的子节点语言上下文不会自动更新。
