跳到主要内容

CSS 语言伪类

在 CSS 中，语言伪类（:lang()）是一种强大的选择器，允许开发者根据元素的语言属性（lang 属性）来应用样式。这对于多语言网站尤其有用，因为它可以帮助你为不同语言的文本设置不同的样式。

什么是语言伪类？​

语言伪类 :lang() 用于选择具有特定语言属性的元素。它通过匹配元素的 lang 属性值来工作。例如，如果你有一个网页包含多种语言的文本，你可以使用 :lang() 为每种语言设置不同的字体、颜色或其他样式。

语法​

css
:lang(language-code) {
  /* 样式规则 */
}
  • language-code 是一个表示语言代码的字符串，例如 en 表示英语，fr 表示法语。

如何使用语言伪类？​

假设你有一个包含英语和法语的网页，你可以使用 :lang() 为每种语言设置不同的字体样式。

示例 1：基本用法​

html
<p lang="en">This is an English paragraph.</p>
<p lang="fr">Ceci est un paragraphe en français.</p>
css
:lang(en) {
  font-family: Arial, sans-serif;
  color: blue;
}

:lang(fr) {
  font-family: "Times New Roman", serif;
  color: red;
}

输出效果：

  • 英语段落将使用 Arial 字体，颜色为蓝色。
  • 法语段落将使用 Times New Roman 字体，颜色为红色。

示例 2：嵌套元素​

语言伪类也可以应用于嵌套元素。例如，如果你有一个包含多种语言的段落，你可以为每种语言设置不同的样式。

html
<p lang="en">This is an English paragraph with <span lang="fr">some French text</span> inside.</p>
css
:lang(en) {
  font-family: Arial, sans-serif;
  color: blue;
}

:lang(fr) {
  font-family: "Times New Roman", serif;
  color: red;
}

输出效果：

  • 整个段落将使用 Arial 字体，颜色为蓝色。
  • 嵌套的法语文本将使用 Times New Roman 字体，颜色为红色。

实际应用场景​

多语言网站​

在多语言网站中，语言伪类可以帮助你为不同语言的文本设置不同的样式。例如，你可能希望为中文和日文使用不同的字体，或者为阿拉伯文设置从右到左的文本方向。

html
<p lang="zh">这是一段中文文本。</p>
<p lang="ja">これは日本語のテキストです。</p>
<p lang="ar">هذا نص باللغة العربية.</p>
css
:lang(zh) {
  font-family: "SimSun", serif;
}

:lang(ja) {
  font-family: "MS Mincho", serif;
}

:lang(ar) {
  font-family: "Times New Roman", serif;
  direction: rtl;
}

输出效果：

  • 中文文本将使用 SimSun 字体。
  • 日文文本将使用 MS Mincho 字体。
  • 阿拉伯文文本将使用 Times New Roman 字体，并且文本方向为从右到左。

表单验证​

在表单验证中，你可以使用语言伪类为不同语言的错误消息设置不同的样式。

html
<form>
  <label for="email">Email:</label>
  <input type="email" id="email" required />
  <span lang="en" class="error">Please enter a valid email address.</span>
  <span lang="fr" class="error">Veuillez entrer une adresse email valide.</span>
</form>
css
:lang(en) .error {
  color: red;
}

:lang(fr) .error {
  color: blue;
}

输出效果：

  • 英语错误消息将显示为红色。
  • 法语错误消息将显示为蓝色。

总结​

CSS 语言伪类 :lang() 是一种非常有用的工具，可以帮助你根据元素的语言属性应用样式。它在多语言网站、表单验证等场景中尤其有用。通过使用 :lang()，你可以为不同语言的文本设置不同的字体、颜色、文本方向等样式，从而提升用户体验。

附加资源与练习​

  • 练习 1：创建一个包含英语、法语和西班牙语的网页，并使用 :lang() 为每种语言设置不同的背景颜色。
  • 练习 2：在一个表单中，使用 :lang() 为不同语言的错误消息设置不同的字体大小。
提示

你可以通过 MDN Web Docs 了解更多关于 :lang() 的详细信息。