:lang()

Baseline 广泛可用 *

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

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

试一试

*:lang(en-US) {
  outline: 2px solid deeppink;
}
<p lang="en-US">
  Music during road trips and long commutes aren’t a problem, but using
  headphones isn’t the best thing to do while driving in your car.
</p>

<p lang="pl-PL">
  Gdy widzimy znak z narysowaną czaszką i napisem
  <strong lang="en-US">DANGER</strong> to lepiej nie wchodzić do środka.
</p>

注意:在 HTML 中,语言由 lang 属性、<meta> 元素以及可能来自协议的信息(例如 HTTP 标头)的组合来确定。对于其他文档类型,可能有其他确定语言的文档方法。

语法

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

参数

<language-code>

一个或多个以逗号分隔的 <string> 列表,根据其 lang 属性中设置的 BCP 47 语言标签来定位元素。按语言范围匹配不区分大小写。

描述

选择语言时,存在隐式通配符匹配,因此 :lang(de-DE) 将匹配 de-DEde-DE-1996de-Latn-DEde-Latf-DEde-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>

结果

规范

规范
选择器 Level 4
# lang-pseudo

浏览器兼容性

另见