lang属性必须为非空合法BCP 47值（如zh-CN、ja、ar），否则:lang()完全失效；:lang(zh)前缀匹配，:lang(zh-CN)精确匹配；字体需按语言分设并前置对应字体，混合内容须显式标注lang。
lang属性没写对，:lang()就完全不生效
浏览器不会猜你页面是哪种语言，html标签必须带非空、合法的lang属性，否则所有:lang()规则静默失效。常见错误包括：<html>（没属性）、<html lang="">（空值）、<html lang="zho">（非法BCP 47代码）。正确写法只有这些：<html lang="zh-CN">、<html lang="ja">、<html lang="ar">。大小写不敏感（zh-cn也行），但zh_CN或zh-cn-xxx这种下划线/多余后缀格式不被识别。
:lang(zh)和:lang(zh-CN)匹配逻辑完全不同
:lang(zh)是前缀匹配，能命中lang="zh"、lang="zh-Hans"、lang="zh-TW"；而:lang(zh-CN)只精确匹配lang="zh-CN"，不兼容zh-Hans或zh-HK。实际项目中建议：
- 通用中文规则用
:lang(zh)，比如基础字间距、行高 - 需要区分简繁体时，同时写多个：例如
body:lang(zh-Hans)+body:lang(zh-Hant)，并确保HTML里真用了对应值 - 别混用写法：
:lang("zh")（引号多余）、:lang(zh-cn)（小写可接受，但括号内结构必须和属性值一致）
字体栈顺序错了，中日韩文字直接翻车
直接写font-family: "Noto Sans CJK SC", sans-serif是典型错误——西文字母会被强制套用中文字体，导致字重发虚、标点错位；更糟的是，若用户系统没装该字体，回退到sans-serif会落到Arial或Helvetica，而这俩对日文、韩文支持极差，结果就是方块。
正确做法是按语言拆开声明：
立即学习“前端免费学习笔记（深入）”；
body:lang(zh) { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
body:lang(ja) { font-family: "Hiragino Kaku Gothic Pro", "Yu Gothic", sans-serif; }
body:lang(ko) { font-family: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
注意三点：
- 每种语言只加载自己需要的字体，避免跨语言污染
- 中日韩字体必须放在西文字体前面，否则 fallback 会跳过
- 末尾保留
sans-serif作为兜底，防止字体加载失败时彻底崩坏
混合内容必须给内联元素加lang，不能只靠根标签
:lang()依赖语言继承链，但仅当文本内容本身有明确语言归属时才可靠。比如一段英文正文里夹一句日语，如果只在<html lang="en">设了语言，p:lang(ja)不会命中那句日语——它没显式声明语言。
解决办法是给具体文本节点加lang：
<p>This is English, but <span lang="ja">こんにちは</span> means hello.</p>
这样span:lang(ja)才能生效。常见场景包括：
- 多语言词典条目
- 用户评论含外语短语
- 技术文档里的代码示例含非拉丁字符
别指望[lang]选择器替代——它只匹配显式写了lang的元素，而:lang()能继承父级语言，但混合内容仍需手动标注。
