异常教程

CSS :lang() 选择器（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，样式与内容的精准匹配是提升用户体验的关键。当需要为不同语言的文本设置特定样式时，CSS 的 :lang() 选择器便能发挥重要作用。无论是多语言网站的设计，还是针对特定语言文本的高亮显示，这个选择器都能帮助开发者高效实现需求。本文将从基础概念、语法细节到实战案例，逐步解析 CSS :lang() 选择器的使用方法，并通过类比和实例帮助读者深入理解其应用场景。

什么是 CSS :lang() 选择器？

:lang() 是 CSS 中一个基于语言属性的选择器。它的核心功能是根据 HTML 元素的 lang 或 xml:lang 属性值，为特定语言的文本内容选择并应用样式。

形象比喻：
可以将 :lang() 想象成一个“语言过滤器”。例如，图书馆的书籍按语言分类，:lang() 就是根据书籍的标签（如“en”表示英文、“zh”表示中文）自动分拣到对应的书架上。开发者通过这个选择器，可以针对不同语言的文本“精准投放”样式规则。

基础语法与使用场景

语法结构

:lang() 的语法如下：

:lang(language) {  
  /* 样式声明 */  
}

其中 language 是语言代码（如 en、zh、fr 等），需与 HTML 中的 lang 属性值严格匹配。

示例代码：

<p lang="en">Hello World</p>  
<p lang="zh">你好，世界</p>  

/* 为英文文本设置蓝色 */  
:lang(en) {  
  color: blue;  
}  
/* 为中文文本设置红色 */  
:lang(zh) {  
  color: red;  
}

效果：英文文本显示蓝色，中文文本显示红色。

核心特性

  1. 继承性：如果父元素设置了 lang 属性，子元素即使未声明 lang，也会被 :lang() 选中。

    <div lang="ja">  
  <p>こんにちは</p>  
</div>  

    :lang(ja) {  
  font-family: "Meiryo", sans-serif;  
}

    此时 <div> 和 <p> 均会应用日语字体。

  2. 层级叠加：可与其他选择器结合，实现更精细的控制。

    /* 仅选择段落中的法语文本 */  
p:lang(fr) {  
  font-style: italic;  
}

进阶用法：结合其他选择器与伪类

与类选择器或属性选择器结合

通过组合使用，可以针对特定语言的元素应用复杂样式。例如，为法语段落的悬停状态添加动画：

:lang(fr).highlight:hover {  
  transform: scale(1.1);  
  transition: transform 0.3s ease;  
}

结合伪元素与伪类

:lang() 可与 ::before、::after 等伪元素结合，实现语言相关的提示信息。例如，为西班牙语输入框添加语言标识：

input:lang(es)::before {  
  content: "Texto en español:";  
  color: green;  
}

实际案例：多语言网站的样式适配

案例 1：动态切换语言时的样式同步

假设一个支持中、英、法三种语言的网站，用户切换语言后，需自动调整文本颜色和字体：

<!-- HTML 结构 -->  
<body lang="zh">  
  <h1>欢迎来到多语言页面</h1>  
  <button onclick="changeLang('en')">English</button>  
  <button onclick="changeLang('fr')">Français</button>  
</body>  

/* CSS 样式 */  
:lang(zh) {  
  color: #ff5722; /* 橙色中文 */  
  font-family: "Microsoft YaHei", sans-serif;  
}  
:lang(en) {  
  color: #2196f3; /* 蓝色英文 */  
  font-family: Arial, sans-serif;  
}  
:lang(fr) {  
  color: #4CAF50; /* 绿色法语 */  
  font-family: "Lucida Grande", sans-serif;  
}  

// JavaScript 切换逻辑  
function changeLang(langCode) {  
  document.body.setAttribute("lang", langCode);  
}

通过修改 <body> 的 lang 属性，页面会自动应用对应语言的样式，无需手动重写 CSS。

案例 2：表单验证提示的本地化

在表单验证中，错误提示信息可根据用户语言显示不同样式：

<!-- HTML 表单 -->  
<label lang="en">  
  <span>Username:</span>  
  <input type="text" required>  
  <span class="error" lang="en">Username is required!</span>  
</label>  

/* CSS 样式 */  
.error {  
  display: none;  
}  
/* 当语言为中文时显示红色错误信息 */  
:lang(zh) .error:invalid {  
  color: red;  
  display: inline;  
}

当用户输入不符合要求时，错误提示会根据页面语言自动显示对应颜色。

常见问题与注意事项

Q1：HTML 中如何设置语言属性？

在 HTML 元素中添加 lang 属性即可：

<!-- 全局语言设置 -->  
<html lang="ja">  
<!-- 局部语言设置 -->  
<p lang="es">¡Hola, mundo!</p>

Q2：子元素未设置 lang 属性时会怎样？

子元素会继承父元素的 lang 属性值。例如：

<div lang="zh">  
  <p>子元素会继承中文语言属性</p>  
</div>

此时 <div> 和 <p> 均会被 :lang(zh) 选中。

Q3：如何处理语言代码的变体（如 en-US vs en）？

:lang() 会选择与语言代码完全匹配或其子集的元素。例如：

:lang(en-US) { /* 匹配 lang="en-US" 的元素 */  
  ...  
}  
:lang(en) { /* 匹配 lang="en" 或 lang="en-US" 的元素 */  
  ...  
}

若需严格匹配 en-US，需单独声明。

结论

:lang() 选择器是 CSS 中一个强大且灵活的工具，尤其在多语言项目中能显著提升开发效率。通过精准匹配语言属性，开发者可以轻松实现样式与内容的分离，减少重复代码。无论是基础的文本颜色调整，还是复杂的动态样式适配，:lang() 都能提供直观且高效的解决方案。

掌握这一选择器后，建议读者尝试将其与 JavaScript 结合，探索更多动态交互场景的可能性。例如，通过监听语言切换事件，自动更新页面语言属性并触发样式变化。随着实践的深入，:lang() 选择器将成为你应对多语言挑战的得力助手。

最新发布

查看更多文章