:lang()

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

CSS 中,:lang() 伪类 选择器根据其给定语言属性的上下文匹配元素。在 HTML 中,语言由lang="" 属性、<meta> 元素 以及协议信息(如 HTTP Accept-Language 请求头1 字段)的组合来确定。 HTML 4.0 规范中指定了可接受的语言代码字符串

:lang(language-code) { 
  // whatever styling
}

如果元素使用语言 X,则:lang(X) 匹配。匹配是否仅基于标识符 X 是否等于或为元素语言值的由连字符分隔的子字符串,与“|=“ 运算符执行的方式相同。X 与元素语言值的匹配对于 ASCII 范围内的字符不区分大小写。标识符 X 不必是有效的语言名称。需要注意的是,:lang 选择器可以全局使用,也可以在任何给定元素上专门使用。您可以随意使用 后代选择器 或单独使用:lang(language-code) 伪类。

示例

在我们的根元素(即<html>)上使用lang 属性,我们可以根据指定的语言替换引号。

<html lang="en">
<body>
  <p><q>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</q></p>
</body>
</html>
q:before { content: open-quote; }
q:after { content: close-quote; }

:lang(en) q { quotes: '“' '”'; }
:lang(fr) q { quotes: '«' '»'; }
:lang(de) q { quotes: '»' '«'; }
英语 (en)

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

法语 (fr)

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

德语 (de)

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.


语言属性不能应用于以下元素

  • applet
  • base
  • basefont
  • br
  • frame
  • frameset
  • iframe
  • param
  • script

相关属性

其他资源

浏览器支持

Chrome Safari Firefox Opera IE Android iOS
支持 支持 支持 支持 支持 支持 支持

:lang(X) 是 CSS 2 级修订版 1 规范的建议,并且 最初作为 CSS 2 级规范的一部分被推荐


1 HTTP 标头字段是超文本传输协议 (HTTP) 中请求和响应的消息标头的组成部分。它们定义了 HTTP 事务的操作参数。Accept-Language 请求头字段类似于 Accept,但将首选作为对请求的响应的一组自然语言进行了限制。