:lang() 伪类按 BCP 47 规则匹配语言标签，支持子标签继承（如 :lang(en) 匹配 en、en-US、en-GB-x-custom），不区分大小写，仅匹配显式设置或继承的合法 lang 属性值，不响应系统语言或未声明语言的元素。
css:lang() 伪类能匹配哪些语言值
文本 最常踩的坑是误以为 真实项目中，通常靠 JS 切换 立即学习“前端免费学习笔记（深入）”； 注意：不要在 实际项目里，:lang() 匹配的是元素的 lang 属性值（或其继承值），但不是简单字符串相等，而是按 BCP 47 语言标签规则做「语言范围匹配」。比如 :lang(en) 能同时匹配 、。
lang 属性（显式设置或从父级继承）lang="ZH" 和 lang="zh" 效果一致:lang(zh-Hans) 匹配 zh-Hans、zh-Hans-CN，但不匹配 zh-Hant
: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 属性实现多语言样式切换
，再用 :lang() 控制全局样式：
上设置初始语言：
document.documentElement.lang = 'zh-Hans'
: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() 还能匹配由 HTTP Content-Language 或 推导出的语言（极少见，且现代浏览器基本忽略后者）:lang() 的价值不在“切换”，而在“免 JS 感知语言上下文”——只要 HTML 结构带对 lang，样式就能自动响应，连 SSR 页面也能开箱即用。但别指望它替代 i18n 框架，它只管样式，不管文案。
