:dir(rtl)仅匹配计算后文本流方向为rtl的元素，依赖显式dir="rtl"（须从开始）或浏览器对强RTL字符的自动推断（Safari≤15.3不支持），lang和direction:rtl无效；需配合逻辑属性（如margin-inline-start）实现自适应，:dir(rtl)仅用于补足transform、flex-direction等无逻辑等价物的场景。
不能单独靠 :dir() 解决 RTL 布局适配问题，它只是方向判断的“开关”，不是镜像逻辑的“执行器”。
为什么写了 :dir(rtl) 但样式没反应？
浏览器不靠 lang 属性推断方向，也不看 CSS 里的 direction: rtl；:dir(rtl) 只匹配「计算后文本流方向为 rtl」的元素，而这个计算只依赖两个来源：
- HTML 中显式写的
dir="rtl"（比如，必须从根开始才稳） - 浏览器根据强 RTL 字符（如阿拉伯字母、希伯来字母）自动推断——但 Safari ≤15.3 不支持，Safari 17.4+ 才完全可靠
- 服务端渲染（SSR）没注入
dir属性时，客户端 JS 后续加也无效：CSS 规则早已解析完毕，:dir(rtl)根本没进匹配队列
:dir(rtl) 配合什么 CSS 属性才真正起效？
物理属性（margin-left、float: left、left）在 RTL 下不会自动翻转，硬写 :dir(rtl) { margin-right: 16px; } 很可能加错边。真正起效的组合是：
- 优先用逻辑属性：
margin-inline-start自动对应 LTR 的左、RTL 的右，无需:dir()就能自适应 - 必须用物理属性兜底时，才用
:dir(rtl)覆盖：.icon:dir(rtl) { transform: scaleX(-1); } - 处理 flex 顺序：
.list:dir(rtl) { flex-direction: row-reverse; }，但注意这会翻转所有子项，含交互控件要格外小心 - 伪元素定位必须用
inset-inline-start，left/right在 RTL 下直接失效
和 [dir="rtl"] 混用会出什么问题？
[dir="rtl"] 只匹配显式写了 dir="rtl" 的元素，无法捕获继承或浏览器自动推断的方向；而 :dir(rtl) 能命中这些场景，但它俩语义不同、匹配机制不同，混用会导致：
立即学习“前端免费学习笔记（深入）”；
- 样式重复或冲突，比如同时写了
[dir="rtl"] .btn和.btn:dir(rtl)，维护时容易漏改一边 - 第三方库（如 Ant Design、MUI）可能自带全局
[dir="rtl"]规则，和你手写的:dir(rtl)产生意外交互 - BEM 类名不该因方向变化而分支，
[dir="rtl"] .btn--primary这种写法破坏命名稳定性，后续重构极易遗漏
最易被忽略的是：伪元素内容方向、flex 子项收缩行为、text-indent 等细节，全部依赖逻辑属性而非 :dir() 本身——它只负责“在哪生效”，不负责“怎么生效”。
