lang属性写在多个层级上不会冲突，而是各司其职：定义整页主语言，子元素、等显式声明局部语言；浏览器和辅助技术不继承父级lang，未声明的元素均回退至值。
lang属性写在多个层级上会冲突吗
不会。浏览器和辅助技术只认 lang 值作为整页主语言依据，其他位置的 lang 不会“覆盖”或“冲突”，而是各司其职：<p lang="en"></p> 显式声明该段落是英文；<td lang="ja"> 表示这个单元格内容为日语。它们不是竞争关系，是嵌套声明关系。
<p>常见错误现象包括：给 <code> 或 <div> 加 <code>lang 以为能“切换全局语言”，结果 <title></title> 和 <meta name="description"> 仍按默认逻辑处理，读屏软件朗读标题时发音错乱。
为什么
里的| 还是被读成中文
因为 <table> 上的 <code>lang 属性不传递语言语义——浏览器和屏幕阅读器（NVDA、VoiceOver）**不继承**父级 lang 值。表格内每个 <td> 或 <code><th> 必须单独写 <code>lang，否则一律按
-
<td lang="ja">東京</td> ✅ 有效，触发日语 TTS 引擎
-
<td>東京</td> ❌ 按
-
<td><span lang="ja">東京</span></td> ❌ <span></span> 无语义，读屏软件忽略其 lang
:lang() 选择器匹配失败的真正原因
CSS 的 :lang(ja) 是祖先匹配伪类，它匹配的是“自身或任意祖先有 lang="ja" 的元素”，但前提是这些 lang 值必须符合 BCP 47 规范且写在正确位置。写错格式或漏写，:lang() 就完全不生效。
实操建议：
- 别用
[lang="ja"] 替代 :lang(ja)——前者只匹配显式写了该属性的元素本身，不继承
- 验证值是否标准：在控制台运行
Intl.getCanonicalLocales("zh-Hans")，看是否返回 ["zh-Hans"]
- 错误写法如
zh_hans、Chinese、zh 都会导致 :lang(zh-Hans) 规则被浏览器静默跳过
SPA 切换语言时旧 lang 值残留怎么办
JS 动态改 document.documentElement.lang = "en-US" 只更新根属性，不会自动同步已渲染的子元素。比如页面里有 <p lang="en"></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 和 <pre class="brush:php;toolbar:false;" lang="bash"></pre>，切换成法语后，这些节点的 lang 还是旧值，屏幕阅读器继续用英语引擎读法文内容。
必须手动遍历并更新：
|
