lang属性非继承而是向上查找推断，仅上声明才生效，子元素自身lang值为空，但浏览器和辅助技术会据此推断语言上下文。
lang属性不是“继承”，是“向上查找推断”
HTML里根本不存在属性继承机制，lang看起来像能“传下来”，其实是浏览器在渲染或语音合成时，**主动向上遍历祖先元素找最近一个显式声明的lang值**。这个过程不修改DOM，也不影响el.lang的读取结果——子元素的lang属性值仍是空字符串或null，只是语义处理时被“借用”了。
所以别写<div lang="en"><p>hello</p></div>然后以为<p></p>自己就有了lang="en"。它没有。但VoiceOver、Chrome翻译按钮、:lang(en)伪类会按lang="en"处理它。
lang必须写在html>上，否则整个推断链就断了
是唯一被所有浏览器和辅助技术强制认可的语言源头。写错位置等于没写：
-
→ 翻译按钮不出现，NVDA默认用系统语言朗读 -
<meta http-equiv="Content-Language" content="zh-CN">→ HTML5已弃用，完全无效 -
或（无lang）→ 被当未知语言，字体回退、拼写检查、SEO全受影响
一旦没设lang，哪怕你每个<p></p>都写了lang="zh"，屏幕阅读器仍可能对整页用英文TTS引擎硬读。
局部覆盖要直接写在目标元素上，不能靠父级“带过去”
混排外文内容时，必须把lang打到具体承载文本的标签上，而不是包一层容器：
- ✅
<td lang="ja">東京</td>—— 表格单元格支持lang，读屏软件认 - ✅
<q lang="en">ship it</q>——<q></q>需配合lang才能出正确引号+语音 - ❌
<div lang="en"><p>Hello</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></div>——<p></p>自身无lang，部分读屏软件忽略父级推断 - ❌
<p><span lang="en">API</span></p>—— 语义弱，不如直接<p lang="en">API</p>明确
特别注意：<pre class="brush:php;toolbar:false;"></pre>、<code>、<blockquote></blockquote>这些语义化标签都支持lang，优先用它们承载外文内容，比塞<span></span>更可靠。
:lang()伪类匹配依赖真实lang值，不是CSS继承
:lang(zh)能命中<p></p>，不是因为CSS“继承”了父级样式，而是因为该<p></p>要么自己写了lang="zh"，要么其某个祖先（包括）写了合法lang值且未被中间元素覆盖。
常见失效点：
- 写了
:lang(zh)但没设lang→ 完全不匹配 - 用了
lang="zh_CN"（下划线）或lang="ch"→ 不符合BCP 47，浏览器视作无效，不触发任何:lang() - 嵌套中某层写了
lang="en"，但你想匹配的子元素没显式再写lang→ 它被推断为en，:lang(zh)自然跳过
真正可控的做法：全局 + 局部lang="en"显式标注 + CSS用[lang="en"]做精确控制（比:lang(en)更稳）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
