概述

:lang 选择器用于根据元素的语言属性选择元素。该选择器允许开发人员根据用户选择的语言或页面内容的语言来样式化元素。

语法

:lang(language)

其中 language 是一个语言代码，例如 "en"（英语）或 "es"（西班牙语）。

用法

:lang 选择器可用于实现以下功能：

• 根据用户语言样式化内容： 开发人员可以使用 :lang 选择器根据用户的浏览语言来样式化元素。例如，他们可以为以不同语言显示的文本设置不同的字体或颜色。
• 创建多语言网站： :lang 选择器可用于创建多语言网站，其中不同语言的内容具有不同的样式。
• 国际化表单： :lang 选择器可用于根据表单输入的语言来验证和格式化数据。

示例

根据用户语言更改文本颜色：

// www.javascriptcn.com code example
body {
  font-family: Arial, sans-serif;
}

:lang(en) {
  color: blue;
}

:lang(es) {
  color: red;
}

创建多语言网站：

// www.javascriptcn.com code example
<div lang="en">
  <h1>Welcome to the English page</h1>
  <p>This is some English content.</p>
</div>

<div lang="es">
  <h1>Bienvenido a la página en español</h1>
  <p>Este es contenido en español.</p>
</div>

:lang(en) {
  background-color: #f0f0f0;
}

:lang(es) {
  background-color: #e0e0e0;
}

浏览器支持

:lang 选择器得到所有现代浏览器的广泛支持，包括：

• Chrome
• Firefox
• Safari
• Edge
• Opera

注意

• :lang 选择器对大写和小写敏感。
• :lang 选择器可以与其他选择器组合使用，例如 :not() 和 :has()。
• :lang 选择器可以用于 HTML 和 SVG 元素。
• :lang 选择器不适用于伪元素，例如 ::before 和 ::after。