:lang()

:lang() 是一種 CSS 偽類 ( pseudo-class )。它會根據括號中指定的語系,來選擇使用的元素。

/* 選取任何語言屬性為英文 (en) 的 <p> */
p:lang(en) {
  quotes: '\201C' '\201D' '\2018' '\2019';
}

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

語法 Syntax

語法格式 Formal syntax

:lang( <language-code> )

參數 Parameter

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

範例 Example

在此例中,:lang() 偽類 會依據 “引用元素 quote” (<q>) 的父層來選擇 子組合子 ( child combinators )。 請注意,此處演示的方法並不是唯一的,並且最好的方式,是依據文檔類型來確定。還要注意的是, Unicode 的值,有明確指定到那些你要使用的字符。

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

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

結果 Result

技術規格 Specifications

規格 Specification 狀態 Status 註 Comment
Selectors Level 4
The definition of ':lang()' in that specification.
Working Draft Adds wildcard language matching and comma-separated list of languages.
添加萬用字符語言匹配,且逗號分隔語言列表。
Selectors Level 3
The definition of ':lang()' in that specification.
Recommendation 沒有重大變化。
CSS Level 2 (Revision 1)
The definition of ':lang()' in that specification.
Recommendation 初步定義。

瀏覽器兼容性 Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:lang()Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 8Opera Full support 8Safari Full support 3.1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

其他參考 See also