使用:lang()伪类可精准匹配语言并支持继承，推荐用于多语言网站的字体、引号、排版等样式控制，属性选择器仅适用于简单场景。
在CSS中，可以通过属性选择器来匹配lang语言属性，从而针对不同语言的内容应用特定样式。HTML中的lang属性用于定义元素内容的语言，比如lang="zh"表示中文，lang="en"表示英文。
使用属性选择器匹配 lang 属性
最基本的匹配方式是使用方括号[]语法来选择具有特定lang属性的元素。
匹配 lang 为 "zh" 的所有 p 元素：
code
p[lang="zh"] {
color: red;
}
这会选中所有的段落，并将其文字颜色设为红色。
立即学习“前端免费学习笔记（深入）”；
使用语言子码匹配（推荐）
CSS 提供了更灵活的匹配方式，特别是处理语言变体时。可以使用波浪号~来匹配以特定语言代码开头的值，即使后面带有地区扩展（如zh-CN、zh-TW）。
匹配所有中文语言变体：
code
p[lang~="zh"] {
font-family: "Microsoft YaHei", sans-serif;
}
这样lang="zh"、lang="zh-CN"、lang="zh-TW"都会被匹配到。
使用伪类 :lang() 进行更精确匹配
更推荐的方式是使用:lang()伪类，它能根据元素的语言语义进行匹配，包括继承的语言设置。
例如：为不同语言设置引号样式：
code
q:lang(en) { quotes: '"' '"'; }
q:lang(zh) { quotes: "“" "”"; }
如果一个元素或其父元素设置了lang="zh"，即使该q标签本身没有lang属性，也能正确应用中文引号。
:lang()比属性选择器更强大，因为它考虑了语言的继承性，而不仅仅是当前元素是否显式写了lang属性。
实际应用场景
常见用途包括：
- 为不同语言设置合适的字体栈
- 调整排版方向（如阿拉伯语使用
direction: rtl） - 控制标点符号或引号的显示
- 适配数字或日期格式的样式（配合 content 和计数器）
基本上就这些。使用:lang()是最符合标准且语义清晰的方式，尤其适合多语言网站的样式控制。属性选择器适用于简单场景，但不够灵活。
