CSS伪类:lang与[class]选择器结合如何实现多语言样式_使用:lang结合class调整字体和颜色-css教程-PHP中文网

CSS伪类:lang与[class]选择器结合如何实现多语言样式_使用:lang结合class调整字体和颜色

P粉602998670

发布： 2025-11-19 15:54:37

原创

190人浏览过

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

css伪类:lang与[class]选择器结合如何实现多语言样式_使用:lang结合class调整字体和颜色

在网页开发中，处理多语言内容时，我们常需要根据不同语言调整字体、颜色或排版。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>

登录后复制

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

立即学习“前端免费学习笔记（深入）”；

Kits AI

Kits.ai 是一个为音乐家提供一站式AI音乐创作解决方案的网站，提供AI语音生成和免费AI语音训练

413

查看详情

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 同时作为筛选条件时。