我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

css居然可以根据页面上节点的lang属性进行节点区分选择，这就是本文要讨论的问题：css区分中文和英文。当然，这里的“区分”这个词也是要打问号的。因为：它区分的是节点的lang属性，而不是节点内部文字的真实归属。所以，这种中英文的区分也是有局限性的。

苏南大叔：css节点选择器，根据lang属性语言设置进行区分选择 - css-lang
css节点选择器，根据lang属性语言设置进行区分选择（图4-1）

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码经验文章。本文讨论css对lang属性的节点查询和利用。测试环境：win10，chrome@123.0.6312.105。

前文回顾

通常情况下，lang属性是定义在页面代码的最前面<html>节点上的。它决定了整个页面的文字设定。参考文章：

<!DOCTYPE html>
<html lang="zh">
  <head></head>
  <body>文字</body>
</html>
HTML

这种情况下，可以使用下面的css控制全篇的文字样式，虽然这没有什么意义！

:lang(zh) {
  color: red;
}
CSS

苏南大叔：css节点选择器，根据lang属性语言设置进行区分选择 - html-lang-css
css节点选择器，根据lang属性语言设置进行区分选择（图4-2）

本文例子

本文中，这些lang属性是设置在具体的节点上的。例如：

<div lang="zh">Div中文LangZh</div>
<p lang="zh">P中文LangZh</p>
<p lang="zh-cn">简体中文zh-cn</p>
<p lang="zh-tw">繁篦中文zh-tw</p>
<div lang="en">Div英文</div>
<p lang="en">english英文</p>
<p lang="en-us">english us</p>
<p lang="en-uk">english uk</p>
HTML

css节点选择

首先，上述lang节点是有适用范围的。存在着zh包含zh-cn和zh-tw的情况。所以，:lang(zh)是可以同时选择到zh-开头的任何节点的。

:lang(zh) {
  color: red;
}
p:lang(zh) {
  background: rgb(214, 252, 2);
}
p[lang="zh-cn"] {
  font-weight: bold;
}
CSS

同理，对en的情况进行css选择：

:lang(en) {
  color: green;
}
p:lang(en) {
  background: rgb(185, 185, 185);
}
p[lang="en-us"] {
  font-weight: bold;
}
CSS

苏南大叔：css节点选择器，根据lang属性语言设置进行区分选择 - css-lang-效果图
css节点选择器，根据lang属性语言设置进行区分选择（图4-3）

扩展阅读

这里的:lang(zh)，实际上相当于*[lang|='zh']，间接等于*[lang^='zh']。具体内容待后续文章讨论。

<style>
    :lang(en) {
    color: green;
    }
    *[lang|="en"] {
    background: rgb(185, 185, 185);
    }
    [lang="en"] {
    font-weight: bold;
    }
</style>
<div lang="en">Div英文</div>
<p lang="en">english英文</p>
<p lang="en-us">english us</p>
<p lang="en-uk">english uk</p>
HTML

苏南大叔：css节点选择器，根据lang属性语言设置进行区分选择 - lang或等
css节点选择器，根据lang属性语言设置进行区分选择（图4-4）

相关文章

总结

苏南大叔的css相关经验文章，请点击：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   css