:lang()伪类通过HTML的lang属性匹配语言并支持继承和模糊匹配，而[lang="xx"]仅严格匹配属性值；适用于中日韩行高、英文连字、字体回退及RTL布局等场景，需确保HTML中lang值合法且正确设置。
用 :lang() 伪类匹配页面语言
直接在 CSS 中用 こんにちは:lang(zh)、:lang(en) 等选择器，就能针对不同 lang 属性值应用样式，无需额外 class 或 JS。前提是 HTML 根元素（或目标元素）正确设置了 lang 属性，比如 或
:lang() 和 [lang="xx"] 的区别在哪
两者都能按语言筛选，但行为不同：
-
:lang(zh)支持子语言继承和模糊匹配：若父元素是lang="zh-CN"，子元素没设lang，div:lang(zh)仍能命中它；:lang(zh)也能匹配zh-TW、zh-HK -
[lang="zh"]是严格属性等值匹配，只认字面完全一致的lang="zh"，不继承、不降级 -
多语言混排场景（如段落内夹英文术语）推荐用
:lang()，更鲁棒
常见多语言样式适配点
不是所有样式都需要区分语言，重点关照排版敏感项：
- 中日韩文字通常需要更大行高：
:lang(zh), :lang(ja), :lang(ko) { line-height: 1.6; } - 英文连字符策略不同：
:lang(en) { hyphens: auto; }，而中文一般禁用：:lang(zh) { hyphens: none; } - 某些字体 fallback 需按语言切换：
:lang(zh) { font-family: "PingFang SC", "Hiragino Sans GB", sans-serif; } - 阿拉伯语/希伯来语需右对齐+RTL 布局：
:lang(ar), :lang(he) { direction: rtl; text-align: right; }
容易被忽略的兼容性与陷阱
:lang() 在所有现代浏览器中支持良好（包括 IE8+），但有几点必须注意：
- HTML 中
lang属性值要合法，比如lang="zh_cn"（下划线）无效，必须是lang="zh-CN"（短横线） - 服务端渲染时若动态插入内容，新节点未带
lang属性，:lang()不会自动继承，得靠 CSS 继承机制兜底（例如根元素设了lang，子元素未覆盖，则默认沿用） - React/Vue 等框架中，JSX 模板写
lang={locale}没问题，但别漏掉 SSR 时同步输出正确的lang值，否则首屏 CSS 不生效
html {
lang: zh-CN;
}
/* 错误：CSS 里不能设置 lang 属性 */
真正起作用的是 HTML 结构里的 lang，CSS 只负责读取它。别指望在样式表里“设置”语言。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
