lang属性写在多个层级上不会冲突，而是各司其职：<html lang="zh-CN">定义整页主语言，子元素<p lang="en">、<td lang="ja">等显式声明局部语言；浏览器和辅助技术不继承父级lang，未声明的元素均回退至<html>值。
lang属性写在多个层级上会冲突吗
不会。浏览器和辅助技术只认 <html> 标签上的 lang 值作为整页主语言依据，其他位置的 lang 不会“覆盖”或“冲突”，而是各司其职：<html lang="zh-CN"> 定义文档基调；<p lang="en"> 显式声明该段落是英文；<td lang="ja"> 表示这个单元格内容为日语。它们不是竞争关系，是嵌套声明关系。
常见错误现象包括：给 <body> 或 <div> 加 lang 以为能“切换全局语言”，结果 <title> 和 <meta name="description"> 仍按默认逻辑处理，读屏软件朗读标题时发音错乱。
为什么<table lang="en">里的<td>还是被读成中文
因为 <table> 上的 lang 属性不传递语言语义——浏览器和屏幕阅读器（NVDA、VoiceOver）**不继承**父级 lang 值。表格内每个 <td> 或 <th> 必须单独写 lang，否则一律按 <html> 的值处理。
-
<td lang="ja">東京</td>✅ 有效，触发日语 TTS 引擎 -
<td>東京</td>❌ 按<html lang="zh-CN">处理，读成“东经” -
<td><span lang="ja">東京</span></td>❌<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"> 和 <pre lang="bash">，切换成法语后，这些节点的 lang 还是旧值，屏幕阅读器继续用英语引擎读法文内容。
必须手动遍历并更新：
- 只更新明确需要随语言切换的节点，比如
<p>、<h2>、<td>；保留引用、代码块等固定语言内容（如<blockquote lang="de">）不改 - 避免重写
outerHTML：虽然能强制刷新，但 ARIA 缓存不清、部分读屏软件状态错乱 - 更稳妥的做法是整页刷新：
window.location.href = "/fr/page.html"，让浏览器从头解析带正确lang的 HTML
最易被忽略的一点：动态插入的内容（如 AJAX 加载的表格行、评论列表项）必须在插入 DOM 前就带上正确的 lang 属性，不能依赖“后续统一补”。
