:lang伪类选择器可根据元素语言设置样式，如中文用PingFang SC字体、首行缩进，英文用Helvetica、无缩进，阿拉伯语右对齐，支持zh、zh-CN等语言匹配，优于属性选择器，需配合HTML的lang属性使用。
在多语言网站中，同一个 HTML 元素可能需要根据不同语言显示不同的样式。比如中文使用某种字体，英文使用另一种，或某些语言下调整行高、对齐方式等。使用 CSS 的 :lang 伪类选择器 是处理这类问题的语义化、高效方案。
什么是 :lang 伪类选择器？
:lang 是 CSS 提供的一个结构化伪类，用于根据元素的 language（由 lang 属性定义）匹配并应用特定样式。它比直接用属性选择器更准确，能正确继承和匹配语言声明。
例如：
<p lang="zh">你好，世界</p> <p lang="en">Hello, world</p>
你可以这样写 CSS：
立即学习“前端免费学习笔记（深入）”；
:lang(zh) {
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
line-height: 1.8;
}
<p>:lang(en) {
font-family: "Helvetica Neue", Arial, sans-serif;
line-height: 1.5;
}</p>实际应用场景示例
以下是一些常见需求及对应的解决方案：
- 字体设置：中文字体通常较宽，英文字体紧凑，使用不同字体提升可读性。
-
文本对齐：阿拉伯语（
lang="ar"）需要右对齐（text-align: right），而中文、英文左对齐。 -
引号样式：不同语言的引用符号不同，CSS 可配合
quotes属性自动替换。 - 首字母缩进：中文段落常首行缩进 2 字符，英文则不需要。
示例代码：
:lang(zh)::first-line {
text-indent: 2em;
}
<p>:lang(en)::first-line {
text-indent: 0;
}</p><p>:lang(ar) {
text-align: right;
font-family: "Tahoma", sans-serif;
}</p><p>/<em> 自定义引号 </em>/
:lang(zh) q { quotes: "“" "”" "‘" "’"; }
:lang(en) q { quotes: '"' '"' "'" "'"; }</p>与属性选择器的区别
你可能会想到用 [lang="zh"] 这样的属性选择器，但它有局限：
- 不会匹配子语言，如
lang="zh-CN"不会被[lang="zh"]匹配（除非写成[lang|="zh"]）。 -
:lang(zh) 能正确匹配
zh、zh-CN、zh-TW等所有中文变体。 - :lang 更符合语义，是标准推荐做法。
注意事项
- 确保 HTML 元素正确设置了
lang属性，否则 :lang 无法生效。 - 建议在
上设置默认语言，子元素会继承。 - 如果动态切换语言，需更新 DOM 的
lang属性以触发样式变化。
基本上就这些。使用 :lang 伪类选择器，可以让多语言样式管理更清晰、更可维护，避免一堆 class 切换的混乱。不复杂但容易忽略。
