17370845950

使用 :lang 伪类和 [class] 属性选择器可精准控制多语言样式，如不同语言设置特定字体、颜色及排版，结合 lang 属性与 class 实现高效、兼容的多语言页面样式管理。

在网页开发中，处理多语言内容时，我们常需要根据不同语言调整字体、颜色或排版。CSS 的 :lang 伪类与 [class] 属性选择器结合使用，能精准地为特定语言的内容应用样式，尤其适用于混合语言页面或用户可切换语言的场景。

使用 :lang 伪类识别语言

:lang 伪类基于元素的 lang 属性匹配语言，而不是根据文本内容自动判断。它支持标准语言标签（如 en、zh、ja、ar）。

给定以下 HTML：

你好，世界
Hello, world
こんにちは

可以这样设置不同语言的字体：

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] 来细化样式规则。例如，一个提示框组件在不同语言下需调整颜色和字体。

操作成功！
Operation successful!
تمت العملية بنجاح!

.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 命名。不复杂但容易忽略细节。