:lang()选择器需 lang 属性直接写在目标元素或其祖先上，且匹配 bcp 47 标准、区分大小写、依赖 html 解析时语言继承，js 动态修改无效，框架中需确保 lang 透传至原生元素。
lang 属性必须写在根元素或目标元素上
很多情况下 :lang() 不生效，是因为 lang 属性没出现在被选中的元素或其任意祖先上。CSS 的 :lang() 是基于元素的「语言信息继承链」匹配的，不是靠 DOM 查找最近的 lang 属性。
比如你想给一段中文段落加样式：p:lang(zh)，但只在 上写了属性，而 <p></p> 本身没继承到语言信息（比如被 JS 清除了、或被其他 CSS 规则覆盖了 lang 继承行为），那选择器就失效。
-
lang属性最好直接写在目标元素上，例如<p lang="zh"> 你好 </p> - 若依赖继承，确保中间没有元素显式设置
lang=""或lang="und"（未定义语言）来中断继承 - 用浏览器开发者工具检查目标元素的「Computed」面板，看
language是否为预期值（Chrome/Firefox 都会显示）
:lang() 的值必须与 lang 属性完全匹配（含子标签）
:lang() 匹配的是 BCP 47 语言标签，区分大小写、支持子标签，但不自动做归一化。例如 :lang(zh-CN) 不会匹配 lang="zh-cn"（小写），也不会匹配 lang="zh"（缺少区域子标签）。
- 浏览器对大小写敏感：
lang="ZH-CN"和:lang(zh-cn)不匹配 -
:lang(zh)可以匹配lang="zh"、lang="zh-Hans"、lang="zh-CN"—— 这是规范定义的“前缀匹配”，但前提是属性值本身符合标准格式 - 避免用非标准写法如
lang="Chinese"或lang="cn"，这些不会被识别为有效语言标签
HTML 解析阶段就决定了 lang 继承，JS 动态改无效
通过 JavaScript 修改 element.lang = "ja" 或 el.setAttribute('lang', 'ja')，** 不会触发 :lang() 重新计算 **。CSS 的语言信息是在 HTML 解析时确定的，运行时变更属性不触发伪类重评估。
立即学习 “ 前端免费学习笔记（深入）”；
- 动态切换语言时，别依赖
:lang()做样式响应；改用 class 切换，例如+body.lang-ja p {……} - 如果必须用
:lang()，需重新插入元素（如el.outerHTML = el.outerHTML）来强制重解析 —— 但性能差，不推荐 - 服务端渲染或静态 HTML 中设置好
lang是最稳妥的方式
某些框架 / 库会剥离或忽略 lang 属性
React、Vue 等框架在 JSX / template 编译过程中，可能把 lang 当作非标准 prop 过滤掉，尤其是写在自定义组件上时（如 <myparagraph lang="ar"></myparagraph>），最终渲染出的 HTML 根本没有该属性。
- 在原生 HTML 元素上使用
lang（如<p lang="ar"></p>）通常安全；在自定义组件上要显式透传lang到根 DOM 节点 - Vue 中用
v-bind="$attrs"，React 中用{……props}并确保lang在props里 - 检查最终渲染的 HTML 源码（右键 → 查看页面源代码），确认
lang确实存在，而不是仅在 React DevTools 里看到
浏览器对 :lang() 的支持虽广泛，但它的匹配逻辑和 DOM 语言状态绑定得非常紧——稍有偏差（属性位置、大小写、动态时机、框架透传）就会静默失效，调试时容易误判为 CSS 写错。
