:lang()需html元素带合法bcp 47格式lang属性（如zh-cn）才生效；常见失效原因是lang缺失、非法（如zh_cn）、框架动态插入未透传，或字体声明顺序错误（西文字体不能置前）。
直接用 :lang() 就能生效，但必须确保 HTML 元素带合法 lang 属性，且值符合 BCP 47 规范（如 zh-CN，不是 zh_CN）；否则样式完全不触发。
为什么 :lang(zh) 有时不生效
最常见原因是 HTML 结构没写对：:lang() 不读取页面“实际内容语言”，只查 DOM 上的 lang 属性是否存在、是否合法。
-
<p>你好</p>没加lang，哪怕整个页面是中文，:lang(zh)也匹配不到 -
lang="zh_cn"是非法值，浏览器忽略，必须写成lang="zh-CN" - React/Vue 中用
v-html或dangerouslySetInnerHTML插入的富文本，若原始 HTML 没带lang，就彻底丢失语言语义 - Safari 要求
lang必须出现在目标元素自身或其祖先上，JS 动态插入后未重排，可能短暂不生效
:lang() 和 [lang="zh"] 的关键区别
别混用——它们匹配逻辑完全不同，选错会导致简繁体共用一套字体、英文术语被套中文字体等排版事故。
-
:lang(zh)支持继承和模糊匹配：父元素lang="zh-CN"，子<em></em>没设lang，em:lang(zh)仍命中；也能匹配zh-TW、zh-HK -
[lang="zh"]是严格等值匹配：只认字面完全一致的lang="zh"，不继承、不降级，漏掉所有地区变体 -
[lang^="zh"]看似方便，但会把zh-Hans和zh-Hant统一处理，导致简体用户看到繁体字体（如PMingLiU），字形错乱
字体栈怎么写才不翻车
错误写法：:lang(zh) { font-family: sans-serif, "PingFang SC"; } ——西文字体放最前，中文段落先被 sans-serif 拦截，根本用不上 PingFang SC。
- 中日韩规则里，强支持该语言的字体必须放最前：
"PingFang SC"、"Yu Gothic"、"Noto Sans KR" - 西文字体（如
"Inter"、"Segoe UI"）必须放在 CJK 字体之后，不能放最前 -
sans-serif必须保留且放末尾，它不参与语言适配，只 fallback 缺字场景 - 不同语言用独立
@font-face，font-family名互不冲突（如"NotoSansCJK-zh"vs"NotoSansCJK-ja"），避免浏览器复用缓存却套错字形
哪些样式真该用 :lang() 控制
别滥用——:lang() 只影响语言相关渲染行为，和布局流向无关。方向切换、边距翻转必须靠 :dir() + 逻辑属性。
- 该管的：
font-family、line-height（中日韩通常需更大行高）、hyphens（:lang(en) { hyphens: auto; }，:lang(zh) { hyphens: none; }）、quotes、text-emphasis - 不该碰的：
direction、text-align、margin-left——这些属于书写模式控制，浏览器只认dir属性；写:lang(ar) { direction: rtl; }会覆盖真实dir，嵌套时直接翻车 - 伪元素定位、flex 子项收缩行为在 RTL 下完全依赖
inset-inline-start、margin-inline-end等逻辑属性，:lang()本身不改变盒模型流向
最容易被忽略的是：字体加载延迟 + 语言切换组合下，font-display: swap 会引发闪动；这不是禁用 swap 的问题，而是得提前用 <link rel="preload"> 加载对应语种的 @font-face 资源——否则用户切到日文页，要等几 MB 字体下载完才重绘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
