lang属性必须写在标签上确立主语言，details内多语种内容需在summary、p等语义元素上显式声明lang，否则屏幕阅读器无法切换语音模型；css应使用:lang()而非[lang]匹配语言上下文。
details 标签本身不处理多语种，它只控制显隐；真正让多语种内容被正确识别、朗读、翻译和排版的，是 lang 属性——而且必须写对位置、值和层级。
为什么details里嵌lang不能只靠根节点继承
浏览器在解析 DOM 时，会为每个文本节点固化语言上下文。一旦 details 内容已渲染，就算你把 html 的 lang 改成 ja-JP，里面那句 <summary>English term</summary> 仍按中文规则发音（比如把 “term” 读成 “特姆”）。这不是延迟问题，是语言绑定发生在解析阶段，不可运行时重载。
常见错误现象：
-
<details><summary>useState</summary><p>React Hook</p></details>—— 全部按html lang="zh-CN"处理，屏幕阅读器不会切换英文语音模型 - 只给
details自己加lang="en"——summary和内部p不继承，无效
实操建议：
- 每个需独立语言处理的子元素都显式声明
lang：<summary lang="en">useState</summary>、<p lang="en">React Hook</p> - 避免用
div包裹多语种内容再设lang——div无语义，部分读屏软件不触发语言切换 - 技术术语优先用
code lang="en"，比span lang="en"更易被 IDE 和语法高亮工具识别
details + lang 配合 CSS :lang() 实现动态排版
想让英文术语自动用等宽字体、日文例句启用连字、法语引文右对齐？光靠 [lang="en"] 选择器不行——它只匹配直接写了 lang="en" 的元素，不穿透到子文本节点。必须用 :lang(en) 才能命中所有祖先链上任意一级声明了该语言的文本。
示例：
<details><summary lang="en">useEffect</summary><div lang="ja"><p>副作用フック</p></div> <blockquote lang="fr">Exécute un effet après le rendu.</blockquote> </details>
CSS 写法：
-
details:lang(en) { font-family: "Fira Code", monospace; }→ 所有含英文上下文的details块生效 -
blockquote:lang(fr) { text-align: right; }→ 法语引文右对齐，哪怕它在details内部 - 别写
details[lang="en"]—— 它只会选中<details lang="en"></details>，而你几乎从不这么写
服务端渲染（SSR）或静态生成（SSG）时，lang 必须随内容动态注入
前端 JS 动态切换语言时，仅改 document.documentElement.lang 是白忙活：已挂载的 details 子元素语言上下文不会刷新，VoiceOver 仍用旧语音引擎，Chrome 翻译按钮也不出现。
真正有效的做法：
- Next.js 用户：确保
app/layout.tsx中的的locale来自路由参数（如params.locale），而非客户端状态 - 纯前端 SPA：若无法 SSR，至少同步更新所有已渲染的
details内部lang属性（包括summary、p、code等），不能只动根节点 - 静态站点（如 Hugo/Jekyll）：为每种语言生成独立 HTML 文件，
lang值硬编码，避免 JS 注入导致闪动或失效
最容易被忽略的一点：即使 details 结构完美，只要 html 根标签的 lang 值非法（比如 zh_cn、ZH-CN、Chinese），整页的多语种能力就归零——SEO 不索引、翻译不触发、屏幕阅读器 fallback 到系统默认语音。验证只需打开 DevTools → Elements → 点击 html 节点，确认 lang 属性存在且值为小写+短横线格式（如 zh-CN、ja-JP）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
