在构建支持多语言的网站时，不同语种的文本对字体、颜色的适配需求存在差异，比如中文适合使用宋体、微软雅黑等字体，英文常用Arial、Roboto等字体，部分小语种可能还需要特殊的颜色标注。CSS的:lang伪类可以直接根据元素的lang属性值匹配对应语言，为其应用专属样式，不需要依赖JavaScript做额外的逻辑判断。
:lang伪类的基础语法
:lang伪类的语法格式非常简单，核心是通过匹配元素的lang属性值来触发样式规则，基础语法如下：
/* 匹配lang属性为zh的元素 */
:lang(zh) {
/* 样式规则 */
}
/* 匹配lang属性为en的元素 */
:lang(en) {
/* 样式规则 */
}
这里的lang属性可以设置在任意HTML元素上，浏览器会按照从当前元素到父元素的层级向上查找lang属性，只要祖先元素有对应的lang属性，子元素也会匹配到对应的:lang规则。比如给<html>标签设置lang="zh"，页面内所有没有单独设置lang属性的元素都会默认匹配:lang(zh)的规则。
通过:lang调整字体样式
不同语言的字符结构不同，适配合适的字体可以提升文本的可读性，我们可以通过:lang为不同语言设置不同的字体系列和字体大小。
基础字体适配示例
下面的代码实现了中文使用微软雅黑、英文使用Arial、日文使用Meiryo的字体适配：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
/* 中文样式 */
:lang(zh) {
font-family: "Microsoft YaHei", sans-serif;
font-size: 16px;
}
/* 英文样式 */
:lang(en) {
font-family: Arial, sans-serif;
font-size: 14px;
}
/* 日文样式 */
:lang(ja) {
font-family: Meiryo, sans-serif;
font-size: 15px;
}
</style>
</head>
<body>
<p>这是一段中文文本</p>
<p lang="en">This is a paragraph of English text</p>
<p lang="ja">これは日本語のテキストです</p>
</body>
</html>
子元素继承规则验证
如果父元素设置了lang属性，子元素即使没有单独设置lang，也会继承父元素的语言匹配规则，示例代码如下：
<div lang="en">
<p>这段文字会匹配:lang(en)的样式，因为父元素设置了lang="en"</p>
<p lang="zh">这段文字会匹配:lang(zh)的样式，因为自身设置了lang="zh"，优先级更高</p>
</div>
通过:lang调整文本颜色
除了字体，我们还可以通过:lang为不同语言设置不同的文本颜色，比如需要突出显示小语种内容，或者区分不同语言的提示文本。
/* 中文文本颜色为深灰色 */
:lang(zh) {
color: #333333;
}
/* 英文文本颜色为深蓝色 */
:lang(en) {
color: #1a365d;
}
/* 西班牙语文本颜色为深绿色 */
:lang(es) {
color: #2d5016;
}
如果是多语言混合的页面，还可以通过组合选择器给特定区域的文本设置颜色，比如只给文章内容区的英文文本设置颜色：
/* 只匹配文章内容区内的英文文本 */
.article-content:lang(en) {
color: #4a5568;
font-style: italic;
}
使用:lang的注意事项
lang属性的值需要符合BCP 47语言标签规范，比如简体中文是zh-CN，美式英语是en-US，:lang伪类也支持匹配带连字符的语言标签，比如:lang(zh-CN)可以精准匹配简体中文内容。:lang伪类的优先级和类选择器相同，比元素选择器优先级高，如果同时有元素选择器和:lang规则，:lang的规则会优先生效。- 不要和
lang属性选择器混淆，[lang="zh"]属性选择器只会匹配自身设置了lang="zh"的元素，不会继承父元素的lang属性，而:lang(zh)会向上查找祖先元素的lang属性，适配范围更广。
实际应用场景示例
下面是一个多语言导航栏的样式适配示例，不同语言的导航项使用不同的字体和颜色：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.nav {
list-style: none;
padding: 0;
display: flex;
gap: 20px;
}
.nav li {
padding: 8px 16px;
}
/* 中文导航项样式 */
:lang(zh-CN) .nav li {
font-family: "PingFang SC", sans-serif;
color: #1a1a1a;
}
/* 英文导航项样式 */
:lang(en-US) .nav li {
font-family: "Helvetica Neue", sans-serif;
color: #2d3748;
}
</style>
</head>
<body>
<ul class="nav">
<li>首页</li>
<li>产品</li>
<li>关于我们</li>
</ul>
</body>
</html>
当页面lang属性切换为en-US时，导航项的字体和颜色会自动切换为英文适配的样式，不需要修改HTML结构，只需要调整html标签的lang属性即可。