:lang()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

:lang() CSS 伪类基于元素语言来匹配页面元素。

尝试一下

备注: 在 HTML 中,语言是通过 lang 属性和 <meta> 元素的组合来决定的,也可能是通过协议的信息来确定(例如 HTTP 标头)。对于其他文档类型,也可能存在其他用于确定语言的方法。

语法

形式语法

css
:lang(<language-code>) {
  /* ... */
}

参数

<language-code>

<string> 代表了你想定位的语言。可接受的值是 HTML 规范中指定的值。

示例

在这个例子中,: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";
}

结果

规范

Specification
Selectors Level 4
# lang-pseudo

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:lang()
Comma-separated list of language codes as :lang(A, B)
Matching language codes with wildcards as :lang(*-Latn)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

参见