在开发支持多语言的网站时，同一个页面元素在不同语言环境下往往需要不同的样式表现，比如中文和英文的字体大小、行高、字间距可能存在差异，或者某些语言的文字长度更长需要调整元素的宽度。传统做法是通过给元素添加不同语言的类名来区分样式，但这种方式需要手动维护类名，不够灵活。CSS的lang伪类选择器可以直接根据元素的语言属性匹配样式，无需额外添加类名，是解决这类问题的更优方案。
lang伪类选择器的基本语法
lang伪类选择器的写法是:lang(语言代码)，其中语言代码遵循ISO 639标准，比如中文是zh，英文是en，日文是ja。它会匹配所有设置了对应语言属性的元素，以及继承了该语言属性的子元素。
常见的语言代码包括：
- zh：中文
- en：英文
- ja：日文
- ko：韩文
- zh-CN：简体中文
- zh-TW：繁体中文
基础使用示例
首先需要在页面的根元素或者对应内容元素上设置lang属性，比如整个页面是中文，可以在html标签上设置lang="zh"：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>多语言页面示例</title>
<style>
/* 中文环境下段落的行高更大 */
:lang(zh) p {
line-height: 1.8;
}
/* 英文环境下段落使用无衬线字体 */
:lang(en) p {
font-family: Arial, sans-serif;
line-height: 1.5;
}
</style>
</head>
<body>
<p>这是一段中文内容</p>
</body>
</html>
如果需要同一个页面内包含不同语言的内容，可以给对应的内容容器设置lang属性：
<div lang="en">
<p>This is English content</p>
</div>
<div lang="zh-CN">
<p>这是简体中文内容</p>
</div>
实际场景应用
不同语言调整字体大小
某些语言的字符比较复杂，需要更大的字体才能清晰显示，比如日文和韩文，可以通过lang选择器设置对应样式：
/* 日文内容字体大小设为16px */
:lang(ja) {
font-size: 16px;
}
/* 韩文内容字体大小设为15px */
:lang(ko) {
font-size: 15px;
}
/* 中文和英文保持默认14px */
不同语言调整文字间距
英文单词之间本身有空格，而中文没有，所以中文的行内间距可以适当调大，提升可读性：
:lang(zh) .content {
letter-spacing: 0.5px;
}
:lang(en) .content {
letter-spacing: normal;
}
多语言表单提示文字样式
表单的提示文字在不同语言下可能需要不同的颜色或者样式，比如中文提示用深灰色，英文提示用浅灰色：
/* 中文提示文字样式 */
:lang(zh) .form-tip {
color: #333;
font-size: 12px;
}
/* 英文提示文字样式 */
:lang(en) .form-tip {
color: #666;
font-size: 11px;
}
注意事项
1. lang伪类选择器的匹配是基于元素的lang属性，而不是页面的元数据，所以需要确保对应元素正确设置了lang属性。
2. lang选择器的匹配是继承的，只要父元素设置了lang属性，子元素没有单独设置的话会继承父元素的语言属性，从而匹配对应的样式。
3. 语言代码可以写全称也可以写简写，比如:lang(zh-CN)和:lang(zh)都可以匹配简体中文内容，但是:lang(zh)的匹配范围更广，会匹配所有中文变体。
4. 如果需要更精准的匹配，可以使用属性选择器[lang="zh-CN"]，它只会匹配lang属性值完全等于zh-CN的元素，而:lang(zh-CN)会匹配zh-CN以及所有以zh-CN开头的语言代码，比如zh-CN-Hans。
总结：使用lang伪类选择器处理多语言页面的样式差异，不需要额外添加类名，减少了HTML结构的冗余，也降低了样式维护的成本，是处理多语言样式适配的最佳实践之一。