使用 :lang 伪类和 [class] 属性选择器可精准控制多语言样式，如不同语言设置特定字体、颜色及排版，结合 lang 属性与 class 实现高效、兼容的多语言页面样式管理。
![css伪类:lang与[class]选择器结合如何实现多语言样式_使用:lang结合class调整字体和颜色](https://img.php.cn/upload/article/000/969/633/176353887716330.jpeg)
在网页开发中，处理多语言内容时，我们常需要根据不同语言调整字体、颜色或排版。CSS 的 :lang 伪类与 [class] 属性选择器结合使用，能精准地为特定语言的内容应用样式，尤其适用于混合语言页面或用户可切换语言的场景。
使用 :lang 伪类识别语言
:lang 伪类基于元素的 lang 属性匹配语言，而不是根据文本内容自动判断。它支持标准语言标签（如 en、zh、ja、ar）。
示例：给定以下 HTML：
<p lang="zh">你好，世界</p> <p lang="en">Hello, world</p> <p lang="ja">こんにちは</p>
可以这样设置不同语言的字体：
立即学习“前端免费学习笔记（深入）”；
p:lang(zh) {
font-family: "Microsoft YaHei", sans-serif;
}
p:lang(en) {
font-family: Arial, sans-serif;
}
p:lang(ja) {
font-family: "Meiryo", sans-serif;
}
结合 [class] 实现更精确控制
当多个语言共享同一个 class 时，可通过组合 :lang 和 [class] 来细化样式规则。例如，一个提示框组件在不同语言下需调整颜色和字体。
HTML 示例：<div class="alert" lang="zh">操作成功！</div> <div class="alert" lang="en">Operation successful!</div> <div class="alert" lang="ar" dir="rtl">تمت العملية بنجاح!</div>CSS 样式：
.alert[lang="zh"] {
color: #d4380d;
font-family: "PingFang SC", "Hiragino Sans GB", sans-serif;
font-size: 14px;
}
.alert[lang="en"] {
color: #1677ff;
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
}
.alert[lang="ar"] {
color: #52c41a;
font-family: "Segoe UI", sans-serif;
direction: rtl;
text-align: right;
}
这里使用了 .alert[lang="xx"] 而非 :lang(xx)，因为属性选择器在某些情况下更具兼容性和明确性，尤其是在 class 和 lang 同时作为筛选条件时。
动态切换语言时的应用建议
如果网站支持语言切换，推荐通过 JavaScript 动态修改元素的 lang 属性，并配合预设的 CSS 规则实现样式自动更新。
技巧：- 保持字体声明简洁，优先使用系统已安装字体提升加载速度。
- 中文建议使用无衬线字体，英文可选用 Helvetica 或 Arial。
- 阿拉伯语等 RTL 语言，除颜色和字体外，注意设置 direction 和 text-align。
- 避免过度依赖 JavaScript 判断语言，应以 HTML 的 lang 属性为基础。
基本上就这些。合理使用 :lang 和 [class] 结合的方式，能让多语言网站在视觉呈现上更自然、专业，同时减少冗余的 class 命名。不复杂但容易忽略细节。
