在构建面向多地区用户的网页时，不同语言往往需要不同的字体、行高甚至标点样式。CSS中的:lang选择器能够根据元素或其祖先的lang属性，为特定语言的内容套用对应样式，是处理多语言界面非常实用的工具。
什么是:lang选择器
:lang是一个CSS伪类，用来选取带有指定语言代码的元素。它通常配合HTML的lang属性使用，例如<html lang="zh">或<p lang="en">。当浏览器解析到这些属性后，:lang规则就会自动匹配。
基础语法
写法非常简单，格式如下：
/* 匹配所有语言为英文的元素 */
:lang(en) {
font-family: 'Times New Roman', serif;
}
/* 匹配语言为中文的元素 */
:lang(zh) {
font-family: 'Microsoft YaHei', sans-serif;
line-height: 1.8;
}
匹配规则与优先级
:lang不仅会匹配自身带有lang属性的元素，也会匹配从祖先继承语言信息的元素。比如下面这段HTML：
<div lang="fr"> <p>这是一段法语区域中的文字</p> <p lang="en">This is English text.</p> </div>
在上面的结构中，第一个<p>会继承父级的fr语言，因此:lang(fr)的样式会对它生效；第二个<p>自己声明了en，则应用:lang(en)的样式。
与类选择器的对比
| 方式 | 优点 | 缺点 |
|---|---|---|
| 使用类名 | 直观、易控制 | 需手动维护，易遗漏 |
| 使用:lang | 随lang属性自动生效 | 依赖正确的语言声明 |
实际应用场景
引号本地化
不同语言习惯使用不同的引号，我们可以用:lang来设置：
q:lang(zh) {
quotes: '“' '”';
}
q:lang(en) {
quotes: '"' '"';
}
字体回退优化
中文和英文混排时，常希望英文用无衬线字体、中文用黑体，可这样写：
:lang(zh) {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
:lang(en) {
font-family: Arial, Helvetica, sans-serif;
}
注意事项
- 确保HTML正确声明了lang属性，否则:lang无法匹配。
- 语言代码不区分大小写，但建议使用标准写法如zh-CN、en-US。
- 若用JavaScript动态修改lang，样式也会随之更新。
:lang选择器让多语言样式管理变得更声明式，适合国际化项目长期使用。
合理利用:lang，可以减少大量重复类名，也让语言相关的样式逻辑更清晰。