:lang()

**:lang()** CSS 伪类 根据元素确定的语言匹配元素。

试试看

**注意：**在 HTML 中，语言由lang 属性、<meta> 元素以及可能来自协议（如 HTTP 标头）的信息共同决定。对于其他文档类型，可能存在其他文档方法来确定语言。

语法

正式语法

:lang(<language-code> [,<language-code> ]*)
  /* ... */
}

参数

<language-code>

一个或多个<string> 的逗号分隔列表，根据BCP 47 语言代码，针对具有特定语言值的元素。根据语言范围匹配不区分大小写。

描述

在选择语言时，存在隐式通配符匹配，因此 :lang(de-DE) 将匹配 de-DE、de-DE-1996、de-Latn-DE、de-Latf-DE 和 de-Latn-DE-1996。显式使用通配符必须包含语言子标签的完全匹配，因此 :lang("*-F*") 无效，但 :lang("*-Fr") 有效。

示例

匹配给定语言的子元素

在此示例中，:lang() 伪类用于使用子组合器 匹配引号元素 (<q>) 的父元素。请注意，这并非执行此操作的唯一方法，并且要使用的方法取决于文档类型。另请注意，使用Unicode 值来指定某些特殊引号字符。

HTML

html
<div lang="en">
  <q>This English quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="fr">
  <q>This French quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="de">
  <q>This German quote has a <q>nested</q> quote inside.</q>
</div>

CSS

css
:lang(en) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "« " " »";
}
:lang(de) > q {
  quotes: "»" "«" "\2039" "\203A";
}

结果

匹配多种语言

以下示例演示了如何通过提供逗号分隔的语言代码列表来匹配多种语言。还可以使用通配符来匹配给定语言范围内的语言。

CSS

css
/* Matches nl and de */
:lang("nl", "de") {
  color: green;
}

/* Omitting quotes & case-insensitive matching */
:lang(EN, FR) {
  color: blue;
}

/* Wildcard matching a language range */
:lang("*-Latn") {
  color: red;
}

HTML

html
<p lang="nl">Dit is een Nederlandse paragraaf.</p>
<p lang="de">Dies ist ein deutscher Satz.</p>
<p lang="en">This is an English sentence.</p>
<p lang="en-GB">Matching the language range of English.</p>
<p lang="fr">Ceci est un paragraphe français.</p>
<p lang="fr-Latn-FR">Ceci est un paragraphe français en latin.</p>

结果

规范

规范
选择器级别 4
# lang-pseudo

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅