使用 :lang 伪类可根据元素语言设置样式,无需额外 class;通过 lang 属性匹配中、英、日等语言,支持地区变体如 zh-CN、en-US;可针对不同语言设定字体、行高、字间距及 RTL 布局;继承机制使子元素自动应用父级语言样式;需正确设置 HTML 的 lang 属性,主流浏览器均支持,推荐结合字体堆栈合理使用。

在网页开发中,面对多语言内容时,除了功能上的适配,样式也需要根据不同语言做出调整。CSS 的 :lang 伪类提供了一种语义化的方式,根据元素的语言设置特定样式,而无需额外的 class 或 data 属性。
lang 伪类的基本用法
:lang() 伪类基于元素的 lang 属性来匹配语言,并应用对应样式。浏览器会查找元素自身或其父级上的 lang 属性来判断语言。
例如:HTML 中设置语言:
你好,世界
Hello, world
こんにちは
CSS 中使用 :lang 区分样式:
立即学习“前端免费学习笔记(深入)”;
p:lang(zh) {
font-family: "SimSun", serif;
}
p:lang(en) {
font-family: "Arial", sans-serif;
}
p:lang(ja) {
font-family: "MS Mincho", serif;
}
处理复杂语言变体
某些语言有地区差异,比如中文有简体和繁体(zh-CN 和 zh-TW),英文有美式和英式(en-US 和 en-GB)。:lang 支持这些子标签,可以分别定义样式。
示例:
一套面向小企业用户的企业网站程序!功能简单,操作简单。实现了小企业网站的很多实用的功能,如文章新闻模块、图片展示、产品列表以及小型的下载功能,还同时增加了邮件订阅等相应模块。公告,友情链接等这些通用功能本程序也同样都集成了!同时本程序引入了模块功能,只要在系统默认模板上创建模块,可以在任何一个语言环境(或任意风格)的适当位置进行使用!
blockquote:lang(zh-TW) {
font-family: "PMingLiU", serif;
}
blockquote:lang(zh-CN) {
font-family: "FangSong", serif;
}
即使只写 :lang(zh),也能匹配所有中文变体,适合通用规则。更具体的规则可覆盖默认样式。
字体与排版的自动适配
不同语言对字体、字间距、行高甚至标点悬挂的需求不同。通过 :lang 可以自动优化排版。
- 中文段落通常需要更大的行高
- 日文可能需要使用不同的标点挤压方式
- 阿拉伯语等 RTL 语言需配合 direction 处理
实际应用:
p:lang(zh) {
line-height: 1.8;
text-indent: 2em;
}
p:lang(ja) {
letter-spacing: -0.05em;
}
p:lang(ar) {
font-family: "Tahoma", sans-serif;
direction: rtl;
}
注意事项与兼容性
:lang 的优势在于语义清晰,且继承有效。子元素若无明确 lang 属性,会继承父元素语言。
几点提醒:
- 确保 HTML 中正确设置 lang 属性,如 html lang="zh">
- :lang 比 [lang] 属性选择器更准确,能识别语言继承和通配规则
- 主流浏览器均支持 :lang(),包括 IE8+(有限支持)
- 避免过度使用,优先考虑字体堆栈等通用方案
基本上就这些。通过 :lang 实现多语言样式区分,既简洁又符合标准,让国际化页面在视觉上也更自然。









