: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 偽類(pseudo-class)。它會根據括號中指定的語系,來選擇使用的元素。

備註: 在 HTML 中,語言是通過 lang 屬性和 <meta> 元素的組合來決定的, 也可能是通過協議的信息來確定 (例如 HTTP 表頭). 對於其他文檔類型,也可能存在其他用於確定語言的方法。

語法

語法格式

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

參數

<language-code>

<string> 代表你要指定的語言。可接受的值為 HTML 規範中指定的值。

範例

在此例中,:lang() 偽類 會依據 「引用元素 quote」 (<q>) 的父層來選擇 子組合子 ( child combinators )。 請注意,此處演示的方法並不是唯一的,並且最好的方式,是依據文檔類型來確定。還要注意的是, 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

其他參考