做过多语言网站的朋友都清楚，一个页面上可能同时存在英文、法文、西班牙文等不同语言版本的文案，中间用样式或脚本去区分它们时，很多人第一反应是加个 class 完事儿。但仔细想一下，HTML 规范里本身就有了 lang 属性这个标准设计，何必再自己造轮子呢？jQuery 的 :lang() 选择器就是专门用来匹配这些带有语言标记元素的工具。
:lang() 选择器的匹配逻辑很有特色，它会匹配两种类型的元素：
-
元素自身
lang属性的值与指定语言代码一致。 -
元素自身
lang属性的值以指定语言代码开头，紧接着就是一个连字符-。
打个比方，你写 $("p:lang(en)")，它不仅能选中 <p lang="en">，还能匹配到 <p lang="en-us">、<p lang="en-uk"> 这类从 "en" 衍生出来的子语言标记。但 <p lang="fr"> 或 <div lang="en">（标签不是 p）则不会入选。这套规则遵循的是 W3C 的语言标签匹配规范，用连字符做精确定界，不会误把 "en" 当成 "english" 的一部分前缀去胡乱匹配。
语法
$(":lang(language)")
它只接受一个参数 language，也就是你想要筛选的语言代码字符串。这个选择器通常不能独立存在，需要和标签选择器或其他基础选择器配合使用，比如 $("p:lang(en)")、$("span:lang(zh)") 这样的写法。
实战示例：高亮特定语言段落
下面这段代码很直观。页面上有四段内容，分别被标记了不同的语言属性，一个按钮负责触发筛选动作，将 lang 为 en 或以 en- 开头的段落背景改成浅绿色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery :lang() 选择器实战</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
// 只选取 lang="en" 和 lang="en-xxx" 的 <p> 元素
$("p:lang(en)").css("background-color", "lightgreen");
});
});
</script>
</head>
<body>
<h1>多语言内容筛选演示</h1>
<h2>jQuery :lang() 选择器如何匹配语言标签</h2>
<p lang="en">第一段：This paragraph is in English (lang="en").</p>
<p lang="fr">第二段：Ce paragraphe est en français (lang="fr").</p>
<p lang="en-us">第三段：This paragraph uses U.S. English (lang="en-us").</p>
<div lang="es-es">第四段：Este párrafo está en español (lang="es-es").</div>
<h3>点击下面的按钮，选中语言代码为 "en" 或以其开头的段落</h3>
<button>筛选英文内容</button>
</body>
</html>
按钮点击前，所有段落都是默认样式。点击之后，第一段和第三段的背景会变成浅绿色，第二段（法文）和第四段（西班牙文，还是个 div 元素）纹丝不动。这个结果可以预见，但值得留意的是第四个 <div>，哪怕它的语言标记是西班牙文，和英文毫不相干，就算你把它改成 <div lang="en">，$("p:lang(en)") 也不会选中它，因为标签类型不匹配，这是 jQuery 选择器组合筛选在起作用。
什么时候用 :lang() 而不是 .class ？
我刚接触多语言项目时也习惯给每个文案块加 class="lang-en" 这类自定义类名。后来维护一个需要支持八个语种的产品页面时发现，HTML 结构被各种类名搅得臃肿难读，有时候开发忘记加类名，漏掉的文本就没人管了。后来索性回归到规范的 lang 属性：一来 HTML 原生支持，语义更清晰；二来配合 :lang() 选择器，前端筛选逻辑可以直接依赖结构上的语言标记，减少对人为追加类名的依赖。
本节课程知识要点
-
:lang(语言代码)的匹配不是简单的前缀包含，而是有"匹配"和"连字符切割前缀匹配"两层规则。$(":lang(en)")可以命中en-us，但绝不会误伤一个lang="eng"去。 -
跨标签使用时，需要配合元素选择器才能精确命中，比如
$("span:lang(fr)")不会影响<p lang="fr">。 -
在 CSS 原生的
:lang()伪类中也有相似行为，写样式时可以与 jQuery 的筛选逻辑保持一致，这会让你的样式和脚本在语言处理上共享同一套规范。
这个选择器在一些国际化的后台界面、多语言文档站点中非常实用。当你的页面里语言版本混杂，又需要动态切换某类语言内容可见性时，用 :lang() 做筛选比一个个判断类名要干净利落得多。
