:lang选择器可根据HTML的lang属性为不同语言文本自动应用样式,如中文红色、英文蓝色,支持伪元素和继承,需确保lang属性正确书写,适用于多语言混排场景。

在多语言网页中,不同语言的文字可能需要不同的样式处理,比如字体、颜色或行高。CSS 的 :lang 选择器可以基于元素的语言属性自动应用特定样式,无需额外类名,特别适合处理混合语言内容。
使用 :lang 选择器识别语言
HTML 中通过 lang 属性定义文本语言,例如 中文
/* 为中文文本设置红色 */
:lang(zh) {
color: red;
}
/ 为英文文本设置蓝色 /
:lang(en) {
color: blue;
}
/ 法语绿色 /
:lang(fr) {
color: green;
}
实际应用场景示例
当页面同时显示多种语言时,比如用户评论包含中文和英文,使用 :lang 能让浏览器自动区分并着色,提升可读性。
立即学习“前端免费学习笔记(深入)”;
- 中文内容用深红突出,便于识别母语段落
- 英文部分设为蓝色,与界面主色调区分开
- 特殊语言如阿拉伯语(ar)可配合文字方向调整样式
它也适用于伪元素,比如给不同语言的引用添加语言特定的引号样式:
:lang(zh)::before {
content: "“";
}
:lang(en)::before {
content: "\"";
}
注意事项与兼容性
:lang 依赖 HTML 的 lang 属性正确书写。如果缺失或拼写错误(如 "zn" 代替 "zh"),样式将不生效。
- 推荐在根元素 html 上设置默认语言:
- 支持继承,子元素未指定 lang 时会沿用父级
- 主流现代浏览器都支持,包括 IE8+(需文档声明)
基本上就这些。只要结构清晰,:lang 是实现多语言样式自动化的简洁方式,尤其适合内容动态、语言混排的场景。










