:lang()选择器基于BCP 47语言标签语义匹配，支持继承与子标签（如:lang(zh)匹配zh、zh-CN、zh-TW），不区分大小写，但要求HTML中正确标注lang属性，且需注意特异性、字体回退及浏览器兼容性。
如何用 :lang() 选择器匹配不同语言的文本
:lang() 是 CSS 中唯一能根据元素的 lang 属性（或父级继承的语言信息）做语义化匹配的伪类。它不依赖 class 或 data-*，而是真正基于 BCP 47 语言标签解析，比如 lang="zh"、lang="ja-JP"、lang="en-US" 都能被准确识别。
关键点在于：它会向上查找最近的带 lang 属性的祖先，没找到才回退到文档根节点的 lang 值（如 ），不是只看自身属性。
常见误用是写成 [lang="zh"] —— 这只能匹配属性值完全相等，无法处理 lang="zh-Hans" 或 lang="zh-CN" 这类子标签；而 :lang(zh) 能自动匹配所有以 zh 开头的语言变体。
:lang() 的实际写法与参数差异
语法很简单：:lang(语言代码)，括号内是语言子标签，不加引号，大小写不敏感（但推荐小写）。
-
:lang(zh)匹配lang="zh"、lang="zh-Hans"、lang="zh-CN"、lang="zh-TW"等 -
:lang(ja-JP)只匹配精确到ja-JP的情况，不匹配ja或ja-JP-u-ca-japanese（除非浏览器支持扩展标签） -
:lang(en), :lang(zh)可以组合写，但注意逗号是“或”关系，不是链式 - 不能写成
:lang("zh")或:lang(zh-Hans-CN)—— 后者不符合 BCP 47 规范，多数浏览器会忽略
设置字体时为什么不能只靠 :lang() 单独生效
直接写 :lang(zh) { font-family: "Noto Sans CJK SC", sans-serif; } 往往无效，原因有三：
- CSS 特异性太低：如果全局设置了
body { font-family: Arial; }，它的层叠权重就压过了:lang()规则 - 字体 fallback 机制干扰：即使
:lang(zh)生效，若主字体缺失字形，浏览器仍可能回退到系统默认中文字体，掩盖了你的设置 - HTML 中
lang属性未正确标注：比如整页，但中文段落没加lang="zh"，那:lang(zh)根本不会命中
稳妥做法是提高特异性，例如：body :lang(zh) { font-family: "PingFang SC", "Hiragino Sans GB", sans-serif; }，或者配合 font-language-override（仅 Firefox 支持）做更细控制。
容易踩的坑：中文场景下的典型失效案例
最常遇到的是「页面明明写了 lang="zh"，但日文字体还是被套用到了中文上」——这往往是因为：
-
こんにちは
你好
确实匹配:lang(zh)，但如果父容器（比如）本身有lang="ja"，且你写的规则是article :lang(zh)，那它会被父级lang影响，但实际生效的仍是 article 的字体设置 - 使用了 Web Font 但未声明
unicode-range，导致中文字体文件过大，加载失败后回退到默认字体 - 在 Chrome 中测试时用了简体中文系统，但页面
lang="zh-Hant"，此时:lang(zh)仍能匹配，但:lang(zh-Hant)才精准；不过要注意 Safari 对子标签的支持略弱于 Chrome
真实项目里，:lang() 更适合作为「微调补充」，而不是字体策略的主干。优先保证 HTML 正确标注语言，再用它覆盖特殊段落，比全靠它驱动整站字体更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
