:lang()伪选择器是唯一能根据HTML元素实际声明的lang属性精准匹配语言并应用样式的原生机制，依赖真实语义而非class或data属性，需正确设置各层级lang值才能生效。
:lang() 伪选择器是唯一能根据 HTML 元素实际声明的语言（而非仅靠 class 或属性猜测）精准触发样式规则的原生机制。它不依赖 JavaScript，不污染结构，且浏览器支持极好（IE8+），但用错地方就完全失效。
为什么不能只靠 class 或 data-lang 属性？
手动加 class="zh" 或 data-lang="ja" 看似可控，但容易漏改、难维护，尤其在 CMS 输出或翻译组件动态插入内容时。更关键的是：这类属性无法传达「该段文本在排版意义上属于哪种语言」——比如中英文混排中，Hello世界 里 Hello 需要西文字体间距，而「世界」需要中文行高与标点挤压逻辑，仅靠外层 lang="zh" 不足以穿透到内联元素。:lang() 能继承并精确匹配每个节点的语言语义。
必须配合正确的 lang 属性才能生效
:lang() 匹配的是元素及其祖先中最近的 lang 属性值，不是浏览器界面语言，也不是 meta http-equiv="Content-Language"。常见错误包括：
- 只在
设置顶层语言，但内部Bonjour
lang="fr"→p:lang(fr)不会命中 - 写成
:lang(zh-CN)却在元素上写lang="zh"→ 语言子标签不匹配，需用:lang(zh)或:lang(zh-CN)显式对应 - 用
xml:lang替代lang（XHTML 场景下可接受），但在 HTML5 中应统一用lang
典型排版差异控制示例
不同语种对字体、字距、标点悬挂、断行策略要求差异极大。以下规则直接作用于文本节点，无需额外 class：
/* 中文默认使用无衬线，禁用连字，调整行高 */
:lang(zh), :lang(ja), :lang(ko) {
font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
line-height: 1.6;
letter-spacing: 0;
text-rendering: optimizeLegibility;
}
<p>/<em> 英文/法文等拉丁语系启用连字、微调字距 </em>/
:lang(en), :lang(fr), :lang(de) {
font-family: "Inter", "Segoe UI", system-ui, sans-serif;
line-height: 1.5;
letter-spacing: -0.01em;
font-variant-ligatures: common-ligatures;
}</p><p>/<em> 日文特别处理标点悬挂（需配合 writing-mode 和 text-edge） </em>/
:lang(ja) p {
text-edge: leading;
hanging-punctuation: first;
}</p><p>/<em> 阿拉伯语右向文本 + 特定数字样式 </em>/
:lang(ar) {
direction: rtl;
font-family: "Tajawal", "Cairo", sans-serif;
}
:lang(ar) [dir="ltr"] {
direction: ltr; /<em> 保护内嵌的英文/数字方向 </em>/
}</p>
容易被忽略的继承与覆盖细节
:lang() 的优先级和普通类选择器相同，但它依赖 DOM 语言标记的真实层级。最常出问题的是：
- 翻译插件动态注入内容后未同步设置
lang属性 → 样式丢失，必须监听 DOM 变化或在 JS 插入时补全lang - 同一段落中混合多语种（如「API
fetch()方法」），code元素若没声明lang="en"，就会继承父级中文样式，导致等宽字体错乱 - CSS 预处理器（如 Sass）中误写
:lang(#{$lang})导致编译失败 ——:lang()不支持变量插值，必须硬编码或用 JS 动态生成规则
真正起效的前提，是每个需要差异化排版的文本节点，都落在一个明确的 lang 作用域内。这听起来琐碎，却是语种敏感排版不可绕过的事实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
