首页 > 编程笔记 > CSS笔记 阅读：5

CSS :lang()伪类的用法（通俗易懂）

在 CSS 中，:lang() 伪类用来匹配指定语言环境下的元素。

一个标准的 XHTML 文档结构会在 <html> 元素上通过 HTML lang 属性标记语言类型，对于简体中文站点，建议使用 zh-cmn-Hans： 
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<body>
</body>
</html>

对于英文站点或者海外服务器，常使用 en： 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<body>
</body>
</html>

此时，页面上的任意标准 HTML 元素都可以使用 :lang() 伪类进行匹配。其中，括号内的参数是语言代码，如 en、fr、zh 等。例如： 
.cs-content:lang(en) {
   /* 匹配英文 */   
}
.cs-content:lang(zh) {
   /* 匹配中文 */   
}

:lang() 伪类的典型示例是 CSS quotes 属性的引号匹配。例如： 
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) > q { quotes: '« ' ' »'; }
:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
<p lang="en"><q>英语，外面有引号，<q>引号内嵌套的引号</q>。</q></p>
<p lang="fr"><q>法语，外面有引号，<q>引号内嵌套的引号</q>。</q></p>
<p lang="de"><q>德语，外面有引号，<q>引号内嵌套的引号</q>。</q></p>
效果如下图所示：


图 1 不同语言下的引号设置

但是，如果着眼于实际开发，我们是不会遇到上面这个使用引号的场景的，更常见的反而是使用 :lang() 伪类来实现资源控制。

例如，如果使用国内的 IP 访问，则页面输出的时候可以在 <html> 元素上设置 lang="zh-cmn-Hans"；如果使用国外的 IP 访问，则可以设置 lang="en"。

此时，我们就可以根据 :lang() 伪类的不同使用不同的资源或者呈现不一样的布局了。例如，国内的主要社交平台是微信、微博，国外的主要社交平台是脸书、推特。此时，我们可以借助 :lang() 伪类呈现不同的分享内容：
.cs-share-zh:not(:lang(zh)),
.cs-share-en:not(:lang(en)) {
   display: none;
}
从上面这个示例可以看出，:lang() 伪类相对于 [lang] 属性选择器有以下几个优点：

相关文章