优先用 html[lang="zh-cn"] 做全局样式分流，因其稳定、可预测、调试直观；:lang(zh) 浏览器支持不一致，易失效或误匹配。
直接用 html[lang] 或 :lang() 就能分语系控制排版，但必须写对值、配对用、避开继承幻觉——否则中文断行失效、阿拉伯文不右对齐、日文字距错乱全是常态。
html[lang="zh-CN"] 和 :lang(zh) 到底该选哪个
优先用 html[lang="zh-CN"] 做全局样式分流，它稳定、可预测、调试直观；:lang(zh) 看似智能，实际在 Safari 某些版本里对 lang="zh-Hans" 不触发，lang="zh" 又太宽泛（可能误中 lang="zhx" 这类非法值）。真实项目里更常见的是：只在 上设一次，然后靠 html[lang="zh-CN"] .content 控制整块区域，而不是指望每个 <p></p> 都手动加 lang。
-
html[lang="zh-CN"]：匹配精确值，大小写敏感，适合强区域控制（如简体中文标点间距、GB2312 字形 fallback） -
html[lang^="zh-"]：匹配所有带zh-前缀的值（zh-TW、zh-HK），但会漏掉lang="zh"这种无子标签写法 -
:lang(zh)：不依赖元素是否显式写lang，但浏览器实现不一致；真正可靠的做法是并列写：html:lang(zh), html:lang(zh-CN), html:lang(zh-TW)
中英文混排最常踩的断行坑
中文默认不换行，英文却要 hyphenation，混在一起时容易出现长单词撑破容器或中文段落被硬切。这不是字体问题，是 CSS 断行策略没按语言区分。
- 中文段落加
html[lang="zh-CN"] p { word-break: keep-all; }，禁用任意位置断行 - 英文段落加
html[lang="en-US"] p { hyphens: auto; }，启用连字符（注意 Safari 需加-webkit-hyphens） - 避免在通用选择器里写
p { word-break: break-word; }——它会覆盖所有语言的合理行为 - URL 或代码片段这类内容，统一用
html[lang] code, html[lang] pre { word-break: break-all; }，不区分语种
字体 fallback 必须按语言粒度声明
写 font-family: system-ui, sans-serif; 在中文页上等于放弃控制：macOS 用 Helvetica（缺中文字符）、Windows 用 Segoe UI（韩文支持弱）、Linux 用 DejaVu（日文显示异常）。字体链不是越短越好，而是每种语言都要有「强支持」字体打头。
- 中文：先写
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei"，再接system-ui - 日文：必须含
"Hiragino Kaku Gothic Pro", "Yu Gothic"，system-ui放最后 - 阿拉伯文/希伯来文：加
"Segoe UI RTL", "Noto Sans Arabic"，避免依赖系统默认 - 绝不能把
sans-serif放最前——它不是兜底，是降级终点；放前面会导致所有语言都走同一套 fallback 逻辑
RTL 布局不能只靠 direction: rtl
[lang="ar"] 或 :lang(ar) 加了 direction: rtl 只是起点，表单控件、图标顺序、margin 方向全得同步调整，否则会出现输入框光标错位、按钮图标在右边但文字还在左边这种现象。
- 用逻辑属性替代物理属性：
margin-inline-start替代margin-left，text-align: start替代text-align: left - 表单控件如
input[type="date"]在 RTL 下默认已适配，别强行加dir="rtl"覆盖 - 图标与文字顺序需反转：用
flex-direction: row-reverse或order控制，而不是靠float: right - 测试时重点看
textarea光标位置和select下拉箭头方向——这两个最容易暴露 RTL 适配漏洞
真正难的不是写对一条 :lang(zh)，而是确保所有动态插入的内容（比如 i18n 库注入的文案、富文本编辑器生成的 HTML）都带着合法 lang 属性；否则样式规则再完整，也会在某个 <span></span> 上彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
