: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 语言标签