:lang伪类根据HTML的lang属性匹配元素，可为不同语言设置特定样式。如用:lang(zh)设置中文字体、行高，:lang(en)设置英文样式，支持字体、颜色、排版等差异化控制，提升多语言网站可读性与维护性。
在多语言网站开发中，不同语言可能需要不同的字体、行高或颜色来优化显示效果。CSS 的 :lang 伪类提供了一种基于元素语言设置样式的机制，无需额外的类名即可精准控制不同语言内容的外观。
什么是 :lang 伪类？
:lang() 是一个 CSS 伪类，用于匹配设置了特定语言的元素。它依据 HTML 中的 lang 属性 来判断元素的语言，并应用对应的样式规则。
例如，中文内容通常标记为 lang="zh"，英文为 lang="en"，日文为 lang="ja"。通过 :lang(zh) 可以为中文文本单独设置字体或颜色。
使用 :lang 设置不同语言的字体
不同语言的字符集和字形特点不同，合适的字体能提升可读性和美观度。比如中文适合用 sans-serif 类字体，而英文可能更适合系统默认字体。
立即学习“前端免费学习笔记（深入）”；
示例：
HTML:
<p lang="zh">这是一段中文文本</p>
<p lang="en">This is an English paragraph.</p>
CSS:
```css
:lang(zh) {
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
font-size: 16px;
}
:lang(en) {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
```
这样，浏览器会根据语言自动选择更合适的字体渲染。
通过 :lang 调整颜色与排版
除了字体，你还可以用 :lang 控制颜色、行高、字间距等，以适应不同语言的视觉习惯。
- 中文字符密集，适当增加 line-height 提升可读性
- 某些语言背景色不同，可用 color 和 background-color 区分
示例：
```css
:lang(zh) {
color: #333;
line-height: 1.8;
}
:lang(ja) {
color: #555;
font-family: "Hiragino Kaku Gothic Pro", sans-serif;
}
:lang(ar) {
direction: rtl;
text-align: right;
font-family: "Tahoma", sans-serif;
}
```
阿拉伯语（ar）自动设置从右到左的排版，提升语言适配性。
注意事项与兼容性
:lang 依赖于 HTML 元素正确设置 lang 属性，否则无法生效。
- 确保每个语言区块都有 lang 属性，如 <span lang="fr">Bonjour</span>
- 支持主流浏览器，包括 Chrome、Firefox、Safari、Edge
- 不要与属性选择器 [lang="zh"] 完全等同 —— :lang 更智能，支持语言继承和子语言匹配（如 zh-CN 被 :lang(zh) 匹配）
基本上就这些。合理使用 :lang 能让多语言页面更自然、更专业，减少冗余类名，提升维护效率。
