lang()伪类必须配合HTML的lang属性才能生效，仅写CSS无效；它只匹配显式声明或继承的lang值，不自动识别系统语言，且大小写不敏感但建议统一小写。
lang() 伪类怎么写才生效
必须配合 HTML 的 lang 属性才能工作，光写 CSS 不会自动识别浏览器语言或系统语言。它只匹配元素自身或祖先显式声明的 lang 值，不推断、不 fallback。
-
lang()是 CSS 标准伪类，不是 JS 函数，不能传变量或动态计算 - HTML 中推荐写成
<p lang="zh-CN">中文</p>，而不是lang="zh"或lang="cn"—— 后两者不被规范认可，部分浏览器可能忽略 - 如果父元素已设
lang="ja"，子元素没重写，:lang(ja)仍会命中该子元素（继承生效） - 注意大小写：CSS 中
:lang(ZH-CN)和:lang(zh-cn)等价，但建议统一小写，避免和某些框架生成的混合大小写lang值比对失败
中英文混排时字体 fallback 容易错在哪
很多人用 :lang(zh) 给中文字体，却忘了英文段落里夹着中文词（比如技术文档里的 console.log()）依然需要中文字体支持，此时仅靠 :lang(zh) 无法覆盖。
- 更稳妥的做法是：先用
:lang(zh), :lang(ja), :lang(ko)统一设中日韩字体栈，再用:lang(en), :lang(de), :lang(fr)单独调英文衬线/无衬线偏好 - 不要在
:lang(zh)里写font-family: "Helvetica"—— 这会导致中文字符渲染成 Helvetica 缺字时的方块或异常 fallback - 若用 Web Font，确保对应语言的字重/字宽子集已加载，否则
:lang(zh)规则虽生效，字体实际未渲染
lang() 遇到 data-i18n 或 JS 渲染内容怎么办
React/Vue 等框架常通过 data-i18n 属性或 JS 插值更新文本，但这些操作不会自动同步设置 lang 属性，:lang() 就会失效。
- 手动补
lang：服务端渲染时写对，客户端渲染时在 i18n 切换后，用 JS 更新根节点或容器的lang属性，例如document.documentElement.lang = 'zh-CN' - 避免把
lang放在动态插入的<span>上 —— 太碎，维护成本高；优先设在<html>或主内容<main>上 - SSR 场景下，如果语言由 Cookie 或 Header 决定，务必让模板引擎把
lang注入到<html lang="{{locale}}">，否则首屏 CSS 规则不触发
lang() 在 Safari 和旧版 Edge 的兼容性坑
Safari 15.4 之前不支持 :lang(zh-CN) 这种带连字符的值匹配（只认 :lang(zh)），而旧版 Edge（EdgeHTML）对多值逗号分隔的支持不稳定。
立即学习“前端免费学习笔记（深入）”；
- 保险写法是同时写两层：
:lang(zh), :lang(zh-CN), :lang(zh-TW)，别省略基础语言码 - 不要依赖
:lang(*-CN)这种通配（CSS 不支持），也无法用属性选择器模拟（[lang$="-CN"]不等价，因为不继承） - 如果项目需兼容 IE11，
:lang()完全不可用，得改用 class 控制，比如.lang-zh .text { font-family: ... }
真正麻烦的不是语法，而是语言属性经常被漏设、误设或与实际内容脱节 —— 检查一遍 lang 是否真出现在 DOM 节点上，比调样式本身还花时间。
