: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.

: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

瀏覽器兼容性

BCD tables only load in the browser

其他參考