:lang()伪类匹配依赖HTML中合法且正确继承的lang属性，最常见失效原因是lang未设置或值不合规；它支持语言继承和子标签匹配（如:lang(zh)匹配zh-CN），而[lang="zh"]仅精确匹配，两者逻辑本质不同。
:lang() 伪类本身不切换样式，它只是匹配已声明语言的元素；真正“切换”的前提是 HTML 中的 lang 属性值被正确设置或动态更新。
为什么写了 :lang(zh) 却没生效
最常见原因不是 CSS 写错了，而是语言信息根本没传到目标元素上：
-
<html>标签压根没写lang属性 → 后代元素失去继承源头 - 写了
xml:lang="zh-CN"但没写lang→ 大多数浏览器（包括 Chrome、Firefox、Safari）只认lang，xml:lang在 HTML5 中不参与 :lang() 匹配 - 子元素混排日文但没显式加
lang="ja"→<p>Hello 世界</p>里「世界」不会被:lang(zh)命中，除非整个p带lang="zh"，或「世界」被包在<span lang="zh">世界</span>里 - 用了非法语言标签，比如
lang="ch"、lang="cn"或lang="zh_cn"（下划线）→ 不符合 BCP 47 规范，浏览器视作无效值，不触发任何 :lang() 规则
:lang(zh) 和 [lang="zh"] 的实际行为差异
别只看名字，它们匹配逻辑完全不同，直接影响你能不能覆盖到嵌套文本：
-
[lang="zh"]是精确字符串匹配：只命中lang="zh"，不匹配lang="zh-CN"，也不管父级有没有设语言 -
:lang(zh)是语言继承匹配：只要元素自身或任意祖先有lang值属于中文大类（如zh、zh-CN、zh-Hans、zh-HK），就命中；且支持向下穿透到未声明lang的子元素 - 混排场景下，
:lang()更可靠 —— 比如<section lang="en"><p>See you in <span lang="zh">北京</span>.</p></section>，其中span能被:lang(zh)选中，但p不会误中
哪些排版细节值得用 :lang() 控制
不是所有样式都需要按语言拆分。重点盯住那些「同一套规则会让另一种语言显示异常」的点：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 断行行为：
:lang(zh) { text-wrap: wrap; }（中文允许字间断行），:lang(ja) { line-break: strict; }（日文需避头尾） - 引号样式：
:lang(en) q::before { content: "“"; }，:lang(zh) q::before { content: "“"; }（注意中文引号和英文视觉不同，别共用） - 字体链顺序：
:lang(zh) { font-family: "PingFang SC", "Hiragino Sans GB", sans-serif; }，:lang(ja) { font-family: "Hiragino Kaku Gothic Pro", "Yu Gothic", sans-serif; }—— 必须把该语言强支持字体放最前，sans-serif只能当兜底，不能放最前 - RTL 布局：
:lang(ar), :lang(he) { direction: rtl; unicode-bidi: plaintext; }—— 单设direction: rtl不够，得配合unicode-bidi防止嵌入英文数字流向错乱
动态切换语言时要注意的坑
用 JS 改 document.documentElement.lang 看似简单，但有几个隐性条件必须满足：
- 改完后 CSS 会立即响应，无需手动重绘 —— 但前提是旧规则没用更具体的选择器（比如
body.zh .title）把它盖住 - SSR 页面首屏必须在 HTML 源码里就输出正确的
<html lang="xx">，否则首屏渲染时:lang()规则完全不生效 - Safari 15.4 之前不支持
:lang(zh-CN)这种带连字符的写法，只认:lang(zh)；保险起见，生产环境建议同时写：:lang(zh), :lang(zh-CN), :lang(zh-TW) - 别在
:lang()规则里写过于宽泛的全局样式（如:lang(zh) body { ... }），容易和框架默认样式冲突；优先用于处理语言特有的排版原子项
真正难的从来不是怎么写 :lang()，而是确保每个需要语言语义的节点，都带着合法、继承链清晰、不被覆盖的 lang 属性 —— 这个环节出问题，后面所有 CSS 都白搭。
