lang属性不继承,仅通过语义推断实现上下文传递;必须显式设在上才被浏览器、屏幕阅读器和搜索引擎识别;:lang()伪类依赖合法lang值匹配,支持语言族继承而非精确字符串匹配。

lang属性根本不继承,只有语义推断
HTML里没有“属性继承”这回事。你写 <div lang="en"><p>hello</p></div>,<p></p> 元素的 lang 属性值仍然是空的——查 p.lang 得到 "",不是 "en"。所谓“继承”,是浏览器在渲染文本或调用语音合成时,向上查找最近一个显式声明了 lang 的祖先(包括 ),用它的值作为当前元素的语言上下文。这个过程不修改 DOM,也不触发 JS 或 CSS 行为。
lang="zh-CN" 写在 html> 上才真正起效
浏览器、屏幕阅读器、搜索引擎只认 这个位置。写在 、<div lang="zh-CN"> 甚至 <code><meta http-equiv="Content-Language"> 都等于没写:
- Chrome 翻译按钮不出现
- VoiceOver 按系统默认语种朗读,中文被念成英文音
- Google Search Console 报 “未指定语言”
-
:lang(zh)伪类完全不匹配任何元素
局部语言切换必须显式声明,不能靠嵌套自动带过去
混排场景下,比如英文段落里夹一句法语引文,不能指望父级 lang="en" “传给”子元素。正确做法是:
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
- 给
<blockquote></blockquote>加lang="fr":<blockquote lang="fr">Merci</blockquote> - 给
<code>标注语言:<code lang="bash">curl -X POST - 避免给每个单词都加
lang—— DOM 膨胀、无障碍树构建变慢、维护成本陡增 - 注意值必须合法:
zh-CN✅,zh_cn❌(下划线非法),zh⚠️(宽泛,部分 AT 工具 fallback 失效)
:lang() 伪类依赖真实 lang 值,不是 CSS 继承
:lang(zh) 能命中 <p></p>,前提是它自身或某个祖先有合规的 lang 值(如 zh、zh-CN、zh-Hans)。但它和 [lang="zh"] 完全不同:
-
[lang="zh"]只精确匹配lang="zh",不认zh-CN -
:lang(zh)是语言族匹配,支持继承穿透,适合混排 - 如果
:lang(zh)没生效,先检查document.documentElement.lang是否为有效值,再看目标元素是否被动态插入且未带lang
最常被忽略的一点:JS 动态改 document.documentElement.lang = "ja-JP",对已激活的屏幕阅读器会话基本无效;真要切换,得服务端输出正确值,或强制重读(如 document.title = document.title),但后者不可靠。










