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,但将首选作为对请求的响应的一组自然语言进行了限制。
完美!我之前在使用 DIR 属性时遇到了一些问题。这个很有帮助。
正如我在 引号 主题的评论中写的那样,将引号与 lang 属性关联存在一些问题,即
a) 实际使用的引号通常与“官方”引号不符(看看西欧大多数在线版印刷报纸,大多数都遵循美国变体)。
b) Chrome 应用了与 lang 元素关联的“官方”引号,但对 body 元素则不适用。
c) Chrome 将引号应用于具有 lang 属性本身的 q 元素,而不是仅应用于其嵌入的 q 元素。
几个可以检查在线用法的网站
http://libguides.mit.edu/content.php?pid=146063&sid=1241695
http://www.enewsreference.com/country_news.shtml
实际上,在 CSS 中正确定义我的引号使它们独立于 lang 属性,尽管这确实意味着必须在使用 lang 属性的每个元素上使用其中一个类。
我的样式(随意使用)是
/引号/
body{quotes:'\201C' '\201D' '\2018' '\2019';}/“”‘’默认/
.Q_SuiDui * {quotes:'\2018' '\2019' '\201C' '\201D';}/‘’“”/
.Q_DuiSui * {quotes:'\201C' '\201D' '\2018' '\2019';}/“”‘’/
.Q_DS * {quotes:'\22' '\22' '\27' '\27';}/""''/
.Q_DsS * {quotes:'\301D' '\301E' '\27' '\27';}/〝〞''/
.Q_GdoGso * {quotes:'\AB' '\BB' '\2039' '\203A';}/«»‹›/
.Q_GdoDui * {quotes:'\AB' '\BB' '\201C' '\201D';}/«»“”/
.Q_GdoDol * {quotes:'\AB' '\BB' '\201E' '\201D';}/«»„”/
.Q_NK * {quotes:'\300A' '\300B' '\3008' '\3009';}/《》〈〉/
.Q_CJK * {quotes:'\300C' '\300D' '\300E' '\300F';}/「」『』/
.Q_DooSoo * {quotes:'\201E' '\201C' '\201A' '\2018';}/„“‚‘/
.Q_DolSui * {quotes:'\201E' '\201D' '\2018' '\2019';}/„”‘’/
.Q_DolSul * {quotes:'\201E' '\201D' '\2019' '\2019';}/„”’’/
.Q_DolGdo * {quotes:'\201E' '\201D' '\AB' '\BB';}/„”«»/
.Q_DolSuo * {quotes:'\201E' '\201D' '\2019' '\2018';}/„”’‘/
.Q_DolGdi * {quotes:'\201E' '\201D' '\BB' '\AB';}/„”»«/
.Q_GdiGsi * {quotes:'\BB' '\AB' '\203A' '\2039';}/»«›‹/
.Q_DulSul * {quotes:'\201D' '\201D' '\2019' '\2019';}/””’’/
.Q_Ja * {quotes:'\3010' '\3011' '\3016' '\3017';}/【】〖〗/
我的类名是有方法的。例如,DolGdo = 双向左角括号双向外。
你好!我最近创建了一个公司的网站,现在我想推广它。我设法找到了一些可以高效且廉价地做到这一点的公司。例如,网站,或者可以雇用网站管理员。也许有人听说过这家公司或可以提供建议?