:lang() 伪类按 BCP 47 规则匹配语言标签，支持子标签继承（如 :lang(en) 匹配 en、en-US、en-GB-x-custom），不区分大小写，仅匹配显式设置或继承的合法 lang 属性值，不响应系统语言或未声明语言的元素。
css:lang() 伪类能匹配哪些语言值
:lang() 匹配的是元素的 lang 属性值（或其继承值），但不是简单字符串相等，而是按 BCP 47 语言标签规则做「语言范围匹配」。比如 :lang(en) 能同时匹配
、
、
- 必须有有效的
lang属性（显式设置或从父级继承） - 不区分大小写，
lang="ZH"和lang="zh"效果一致 - 支持子标签匹配：
:lang(zh-Hans)匹配zh-Hans、zh-Hans-CN，但不匹配zh-Hant - 无法匹配未声明语言的元素，即使浏览器 locale 是中文，
文本
:lang(zh)选中
为什么 :lang(en) 没生效？常见失效原因
最常踩的坑是误以为 :lang() 会读取系统语言或 的 xml:lang（若没设 lang）：
-
标签没写lang属性 → 后代元素无语言继承源 - 写了
xml:lang但没写lang→ 大多数浏览器只认lang（html5 规范要求优先用lang） - 动态改
lang属性后样式没更新 → css 不监听属性变更，需手动触发重绘（如切换 class 或强制getComputedStyle） - 使用了非法语言标签，如
lang="chinese"或lang="cn"→ 不符合 BCP 47，浏览器视作无效，不参与匹配
配合 HTML lang 属性实现多语言样式切换
真实项目中，通常靠 js 切换 ，再用 :lang() 控制全局样式：
立即学习“前端免费学习笔记（深入）”；
- 在
上设置初始语言： - 用 JS 更新：
document.documentElement.lang = 'zh-Hans' - CSS 中分别定义：
:lang(en) .date-format { content: "MM/DD/yyYY"; } :lang(zh-Hans) .date-format::before { content: "年/月/日"; } :lang(ja) .quote { quotes: "「" "」" "『" "』"; }
注意：不要在 :lang() 里写过于宽泛的样式（如 :lang(zh) body { font-family: sans-serif; }），容易被更具体的规则覆盖；优先用它处理语言特有的排版细节（引号、日期格式、数字间距、断行行为等）。
和 [lang="xx"] 属性选择器的区别在哪
[lang="zh"] 是精确匹配，只命中 lang="zh"，不匹配 lang="zh-CN"；而 :lang(zh) 是语言继承匹配，只要语言属于「中文大类」就生效。
- 需要严格区分简体/繁体时，用
[lang="zh-Hans"]更可控 - 做基础语言适配（比如所有中文都用思源黑体），用
:lang(zh)更健壮 -
:lang()还能匹配由 httpContent-Language或推导出的语言（极少见，且现代浏览器基本忽略后者）
实际项目里，:lang() 的价值不在“切换”，而在“免 JS 感知语言上下文”——只要 HTML 结构带对 lang，样式就能自动响应，连 SSR 页面也能开箱即用。但别指望它替代 i18n 框架，它只管样式，不管文案。