使用 :lang 伪类可根据元素语言设置样式，无需额外 class；通过 lang 属性匹配中、英、日等语言，支持地区变体如 zh-CN、en-US；可针对不同语言设定字体、行高、字间距及 RTL 布局；继承机制使子元素自动应用父级语言样式；需正确设置 HTML 的 lang 属性，主流浏览器均支持，推荐结合字体堆栈合理使用。
在网页开发中，面对多语言内容时，除了功能上的适配，样式也需要根据不同语言做出调整。CSS 的 :lang 伪类提供了一种语义化的方式，根据元素的语言设置特定样式，而无需额外的 class 或 data 属性。
lang 伪类的基本用法
:lang() 伪类基于元素的 lang 属性来匹配语言，并应用对应样式。浏览器会查找元素自身或其父级上的 lang 属性来判断语言。
例如：HTML 中设置语言：
<p lang="zh">你好，世界</p> <p lang="en">Hello, world</p> <p lang="ja">こんにちは</p>
CSS 中使用 :lang 区分样式：
立即学习“前端免费学习笔记（深入）”；
p:lang(zh) {
font-family: "SimSun", serif;
}
p:lang(en) {
font-family: "Arial", sans-serif;
}
p:lang(ja) {
font-family: "MS Mincho", serif;
}
处理复杂语言变体
某些语言有地区差异，比如中文有简体和繁体（zh-CN 和 zh-TW），英文有美式和英式（en-US 和 en-GB）。:lang 支持这些子标签，可以分别定义样式。
示例：
blockquote:lang(zh-TW) {
font-family: "PMingLiU", serif;
}
blockquote:lang(zh-CN) {
font-family: "FangSong", serif;
}
即使只写 :lang(zh)，也能匹配所有中文变体，适合通用规则。更具体的规则可覆盖默认样式。
字体与排版的自动适配
不同语言对字体、字间距、行高甚至标点悬挂的需求不同。通过 :lang 可以自动优化排版。
- 中文段落通常需要更大的行高
- 日文可能需要使用不同的标点挤压方式
- 阿拉伯语等 RTL 语言需配合 direction 处理
实际应用：
p:lang(zh) {
line-height: 1.8;
text-indent: 2em;
}
p:lang(ja) {
letter-spacing: -0.05em;
}
p:lang(ar) {
font-family: "Tahoma", sans-serif;
direction: rtl;
}
注意事项与兼容性
:lang 的优势在于语义清晰，且继承有效。子元素若无明确 lang 属性，会继承父元素语言。
几点提醒：
- 确保 HTML 中正确设置 lang 属性，如 <html lang="zh">
- :lang 比 [lang] 属性选择器更准确，能识别语言继承和通配规则
- 主流浏览器均支持 :lang()，包括 IE8+（有限支持）
- 避免过度使用，优先考虑字体堆栈等通用方案
基本上就这些。通过 :lang 实现多语言样式区分，既简洁又符合标准，让国际化页面在视觉上也更自然。
