:lang()比[lang="zh"]更可靠，因它支持语言继承和模糊匹配，能匹配zh、zh-CN等所有中文变体；而[lang="zh"]仅精确匹配且不继承，子元素未显式声明lang即失效。
:lang() 为什么比 [lang="zh"] 更容易漏掉元素
写了 :lang(zh) 却没生效，大概率不是 CSS 写错，而是语言信息根本没传下去。比如只在 上设了语言，但内部一段 <p>Hello world</p> 没显式声明 lang，这时 [lang="zh"] 完全匹配不到它——因为它只认字面完全相等的 lang="zh"，且不继承、不降级。
:lang(zh) 则不同：它会沿祖先链向上查找，只要最近的合法 lang 值属于中文大类（如 zh、zh-CN、zh-HK），就命中；子元素即使没写 lang，也自动继承。
-
lang="zh zh-CN"是无效写法，浏览器直接忽略整个属性值 -
xml:lang="zh-CN"不参与:lang()匹配，只认lang - 服务端渲染或 JS 动态插入内容时，新节点若没带
lang，:lang()仍靠继承兜底；但若根元素没设lang，所有后代都失效
:lang() 在中英文混排时怎么让“API”用西文字体
纯靠 body { font-family: "PingFang SC", sans-serif; } 会让英文术语（如 “API”、“HTTP”）显示僵硬、字间距过紧。用 :lang(en) 可局部干预，且规则自然向下继承到内联文本。
关键点在于：HTML 中要让语义层级清晰。例如：
立即学习“前端免费学习笔记（深入）”；
<p lang="zh">欢迎使用<span lang="en">API</span>服务</p>
这样 <span lang="en"></span> 就能精准命中 :lang(en) 规则：
:lang(en) {
font-family: "Inter", "Segoe UI", system-ui;
letter-spacing: 0.02em;
}
- 别对
body设统一字体，改用:lang(zh)、:lang(en)分别控制 -
:lang(en)选中的不只是整段英文，还包括嵌套在中文段落里的英文单词 - 若混排频繁，建议把术语包裹在
<span lang="en"></span>，而非依赖父级继承——避免“欢迎使用 API 服务”整段被当成中文处理
:lang(ar) 或 :lang(he) 必须配 unicode-bidi 吗
只写 :lang(ar) { direction: rtl; } 是不够的。阿拉伯语、希伯来语里夹英文或数字时，流向容易混乱——比如 “٢٠٢٤年” 中的阿拉伯数字本该左向排列，但可能被强制 RTL 推偏。
必须加 unicode-bidi: plaintext; 来切断嵌套影响：
:lang(ar), :lang(he) {
direction: rtl;
unicode-bidi: plaintext;
}
-
unicode-bidi: bidi-override强制重排，极易破坏数字顺序，慎用 -
unicode-bidi: isolate更安全，适合包裹单个外文词（如<span lang="en" dir="ltr">React</span>） - 别用
text-align: right替代direction，它只控制块对齐，不改变内联文本流向
调试 :lang() 失效时先看哪三个地方
打开浏览器开发者工具，选中目标元素 → Elements 面板 → 查看 Computed 样式 → 搜索 lan，确认当前计算出的语言值。这是最直接的验证方式。
- 检查
是否真有lang属性，且值合法（如lang="zh-CN"，不是lang="ch"或lang="zh_cn"） - 确认没被其他 CSS 规则覆盖（比如更高优先级的选择器重置了
font-family） - React/Vue 等框架中，SSR 首屏若没同步输出
lang，CSS 规则不会生效——JSX 里写lang={locale}没用，得确保 HTML 源码里就有
语言继承是隐式行为，既省事又容易误判。比如 <section lang="en"><p>Hello</p></section> 里 p 虽无 lang，但 :lang(en) 仍生效——这个特性常被忽略，也常被当成 bug 折腾半天。
