:lang()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since 2015å¹´7æ.

* Some parts of this feature may have varying levels of support.

:lang() CSS å½é¡ææ ¹æåç´ è¢«å¤å®çèªè¨ä¾å¹éåç´ ã

åè©¦ä¸ä¸

*:lang(zh-Hant) {
  outline: 2px solid deeppink;
}

<p lang="zh-Hant">
  å¨å¬è·¯æè¡åé·ééå¤æè½é³æ¨ä¸æ¯åé¡ï¼ä½å¨éè»ææ´è³æ©ä¸¦ä¸æ¯æå¥½çé¸æã
</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> çéèåéåè¡¨ï¼æ ¹æ BCP 47 èªè¨ä»£ç¢¼ï¼å¹éå·æç¹å®èªè¨å¼çåç´ ãä¾èªè¨ç¯åå¹éæä¸ååå¤§å°å¯«ã

é¸æèªè¨æï¼ææé±å«çè¬ç¨ååå¹éï¼å æ¤ :lang(de-DE) å°æå¹é de-DEãde-DE-1996ãde-Latn-DEãde-Latf-DE å de-Latn-DE-1996ãæç¢ºä½¿ç¨è¬ç¨ååæï¼å¿é åå«èªè¨åæ¨ç±¤çå®æ´å¹éï¼å æ¤ :lang("*-F*") æ¯ç¡æçï¼ä½ :lang("*-Fr") æ¯ææçã

ç¯ä¾

å¹éæå®èªè¨çååç´

HTML

html

<div lang="en">
  <q>éåè±æå¼èå§æä¸å<q>å·¢ç</q>å¼èã</q>
</div>
<div lang="fr">
  <q>éåæ³æå¼èå§æä¸å<q>å·¢ç</q>å¼èã</q>
</div>
<div lang="de">
  <q>éåå¾·æå¼èå§æä¸å<q>å·¢ç</q>å¼èã</q>
</div>

CSS

css

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

çµæ

å¹éå¤ç¨®èªè¨

p {
  margin: 0;
}

CSS

css

/* å¹é nl å de */
:lang("nl", "de") {
  color: green;
}

/* çç¥å¼èèä¸ååå¤§å°å¯«å¹é */
:lang(EN, FR) {
  color: blue;
}

/* è¬ç¨ååå¹éèªè¨ç¯å */
: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>