:lang选择器根据html的lang属性匹配元素并应用样式，支持语言继承与变体识别。例如：:lang(zh)可匹配lang=”zh”或lang=”zh-Hans”的元素，适用于设置中文字体、行高、引号等语言特定样式，提升多语言网站排版精度与维护效率。
在多语言网站开发中，针对不同语言的内容应用特定样式是一个常见需求。css 的 :lang 选择器 正是为此设计的，它可以根据元素的语言设置来匹配并应用样式，而不需要额外的类名或属性选择器。
什么是 :lang 选择器？
:lang() 选择器 根据元素的 language（lang）属性值来选择元素。它匹配设置了特定语言的元素，包括其子元素。这个选择器基于 HTML 中的 lang 属性，例如 lang=”zh”、lang=”en” 或 lang=”ja”。
与直接使用属性选择器如 [lang=”zh”] 不同的是，:lang 能够识别语言的继承和子语言规则（比如 lang=”zh-Hans” 会被 :lang(zh) 匹配），更加灵活准确。
基本语法与用法
使用 :lang 的语法非常简单：
立即学习“前端免费学习笔记（深入）”；
:lang(语言代码) { 样式规则 }
示例：
<p lang=”zh”>你好，世界！</p>
<p lang=”en”>Hello, world!</p>
对应的 CSS 可以这样写：
:lang(zh) {
font-family: “SimSun”, serif;
font-size: 16px;
}
:lang(en) {
font-family: Arial, sans-serif;
color: #333;
}
这样，中文段落会使用适合中文的字体，英文段落则使用无衬线字体，实现语言相关的排版优化。
处理复杂语言变体
某些语言有地区变体，例如简体中文（zh-Hans）和繁体中文（zh-Hant）。:lang 选择器支持这些细分语言代码。
HTML 示例：
<div lang=”zh-Hans”>这是简体中文</div>
<div lang=”zh-Hant”>這是繁體中文</div>
CSS 中可以分别定义：
:lang(zh-Hans) {
color: green;
}
:lang(zh-Hant) {
color: blue;
}
也可以用父语言统一设置基础样式：
:lang(zh) {
font-family: “microsoft YaHei”, sans-serif;
}
实际应用场景
在真实项目中，:lang 常用于以下情况：
- 为不同语言设置合适的字体堆栈，避免中文字体影响英文显示效果
- 调整文字间距或行高，例如日文可能需要更大的字间距
- 控制引用样式，因为不同语言的引号格式不同
- 配合伪元素插入本地化标点，如：:lang(fr)::before { content: ‘« ‘; }
基本上就这些。合理使用 :lang 选择器，可以让多语言网站的样式更精准、维护更方便，无需依赖 javaScript 或多余的 class 名。关键是确保 HTML 中正确设置 lang 属性，样式才能准确生效。