:lang()
Baseline 廣泛可用 *
試一試
*: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>
語法
:lang(<language-code> [,<language-code> ]*) {
/* ... */
}
引數
<language-code>-
一個或多個以逗號分隔的
<string>列表，根據其lang屬性中設定的 BCP 47 語言標籤來定位元素。按語言範圍匹配不區分大小寫。
描述
選擇語言時，存在隱式萬用字元匹配，因此 :lang(de-DE) 將匹配 de-DE、de-DE-1996、de-Latn-DE、de-Latf-DE 和 de-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 |
瀏覽器相容性
載入中…
另見
- 透過文字方向性匹配的
:dir偽類 - HTML
lang屬性 - HTML
translate屬性 - BCP 47 語言標籤