:lang()伪类需HTML元素显式设置符合BCP 47标准的lang属性（如zh-CN、en-US）才生效，不支持下划线或空格；匹配遵循继承与精确性规则，且不响应运行时语言变化。
:lang() 伪类本身不自动生效，必须 HTML 元素显式带合法 lang 属性，否则所有规则都无效。
lang 属性怎么写才被 :lang() 正确匹配
浏览器只认 BCP 47 标准格式的 lang 值，比如 zh-CN、ja、en-US，不接受下划线（zh_cn）、空格（zh CN）或非法子标签（zh-Hans-CN）。:lang(zh) 能匹配 lang="zh"、lang="zh-CN"、lang="zh-TW"，但前提是这些值真实存在于 DOM 中——不是靠 JS 渲染后“猜”出来的。
- 根节点设默认语言：
是最简起点，子元素自动继承 - 混排内容必须局部声明：
<p lang="en">API</p>，不能只靠父级lang推断 - React/Vue 动态切换语言时，务必同步更新
document.documentElement.lang，否则首屏样式不触发 - Safari 15.4 之前不支持
:lang(zh-CN)精确匹配，保险起见应同时写:lang(zh)和:lang(zh-CN)
字体声明最容易翻车的三个地方
很多人写了 :lang(zh) { font-family: "PingFang SC", sans-serif; }，结果中文显示成方块或 Helvetica fallback，问题不在选择器，而在字体链结构。
-
sans-serif不能放最前——它会直接接管渲染，后面所有中文字体全被跳过 - 中日韩不能共用同一字体栈：日文
"Yu Gothic"在中文环境可能缺字，韩文"Malgun Gothic"渲染简体中文常偏窄 - Web Font 必须提前加载对应语种子集，否则
@font-face名称虽对，实际字形未就绪，浏览器仍 fallback 到系统字体 - 跨平台要谨慎：Windows 的
"Segoe UI"、Mac 的"San Francisco"不互通，优先用"Noto Sans SC"这类开源字体并绑定:lang()
:lang() 能干但别指望它干的事
:lang() 是静态匹配器，不是运行时语言探测器。它不会读取 navigator.language，也不响应系统语言变化，更不处理 JS 插值文本的语言归属。
立即学习“前端免费学习笔记（深入）”；
- 服务端渲染（SSR）页面，如果
lang由 Cookie 或 Header 决定，模板必须把语言注入到，否则首屏 CSS 规则完全不计算 - 框架里用
data-i18n或v-t翻译文本，不会自动补lang属性——得手动在容器上加，比如<div lang="ja"><p v-t="'hello'"></p></div> -
:lang(zh)无法覆盖英文段落里夹的中文词（如console.log()），因为整个<p></p>的lang是en；真要精细控制，得用<span lang="zh"></span>包裹单个词 - 引号、连字符、对齐等排版属性（
quotes、hyphens、text-align）可直接用:lang()控制，但注意hyphens: auto在 Safari 对中文无效，:lang(zh) { hyphens: none; }才是稳妥写法
最常被忽略的一点：字体加载时机与 lang 更新不同步。JS 改完 document.documentElement.lang 后，CSSOM 重排有延迟，getComputedStyle 或 requestAnimationFrame 往往是唯一能确保新规则立即应用的方式。
