View in English Always switch to English

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

备注: 在 HTML 中,语言是通过 lang 属性和 <meta> 元素的组合来决定的,也可能是通过协议的信息来确定(例如 HTTP 标头)。对于其他文档类型,也可能存在其他用于确定语言的方法。

语法

形式语法

css

:lang(<language-code>) {
 /* ... */
}

参数

<language-code>: <string> 代表了你想定位的语言。可接受的值是 HTML 规范中指定的值。

示例

在这个例子中,: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: "201円C" "201円D" "2018円" "2019円";
}
:lang(fr) > q {
 quotes: "« " " »";
}
:lang(de) > q {
 quotes: "»" "«" "2039円" "203円A";
}

结果

[フレーム]

规范

Specification
Selectors Level 4 # lang-pseudo

浏览器兼容性

参见

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年7月15日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content