lang必须写在具体文本元素上，因屏幕阅读器和CSS :lang() 仅识别元素自身lang属性；父容器设置不继承，BCP 47规范要求严格，中英文混排需用等语义化标签精准标注。
必须在具体元素上写lang，不能靠父容器继承；否则屏幕阅读器读不准、翻译工具翻错、CSS :lang() 选不到。
为什么lang必须写在句子所在标签上
浏览器和读屏软件（NVDA、VoiceOver）只认<p>、<span>、<li>这类文本承载元素自身的lang属性。给<div>或<section>设lang，里面的<p>不会自动继承——它会被当成“未声明语言”，按页面主语言朗读。
-
<div lang="en"><p>Hello world</p></div>❌<p>仍被读作中文音节 -
<p lang="en">Hello world</p>✅ 触发英文TTS引擎 -
<span lang="fr">au revoir</span>✅ 单词级切换也有效
lang值怎么填才不被忽略
BCP 47规范不是摆设：错一个连字符、大小写颠倒、用下划线，都会让辅助技术静默失效。
- 中文别写
zh或zh-Hans，优先用zh-CN（简体+大陆），兼容性最稳 - 英文别写
english或en_US，必须是en-US或en-GB - 日文用
ja，不是jp；韩文用ko，不是kr - 绝对不要写
lang=""——这等于告诉读屏软件“语言未知”，它可能强行用英文引擎读中文多音字
中英文混排句子怎么标lang
一个<p>里既有中文说明又有英文术语（比如“调用useState钩子”），不能整个段落统一设lang="zh-CN"，否则useState会被中文引擎硬切音节，读成“yong-hu-shi”。
立即学习“前端免费学习笔记（深入）”；
- 用
<code>包裹技术词：<p lang="zh-CN">调用 <code lang="en">useState</code> 初始化状态</p> -
<code>是语义化元素，读屏支持好，且天然适合嵌入外语术语 - 避免用
<span>无差别包裹：<span lang="en">useState</span>也可行，但不如<code>语义明确 - 别套多余容器：
<p><span><span lang="en">API</span></span></p>❌ 多层<span>不增加语言意图
CSS里用:lang()匹配时的坑
:lang(en)和[lang="en"]行为完全不同：前者能匹配继承语言的子内容，后者只认属性值完全相等的元素。
-
:lang(en) { font-family: Arial; }✅ 匹配<p lang="en">...<em>OK</em></p>里的<em>（即使它没写lang） -
[lang="en"] { font-family: Arial; }❌ 只匹配显式写了lang="en"的元素，<em>不会被选中 - 要匹配所有中文变体（
zh-CN、zh-TW），用[lang|="zh"]，不是:lang(zh)（后者不支持子标签匹配）
最容易被忽略的是：页面主语言声明只在<html lang="...">里生效，其他任何地方加lang都只是局部覆盖。混排外语句子时，得一层层确认每个文本节点是否真有对应语言标记，而不是指望“父元素写了就全有了”。
