:dir() 仅匹配元素计算出的文本方向而不改变布局，其生效依赖显式 dir 属性或含强 RTL 字符的内容，且 Safari 旧版支持不全；推荐优先使用逻辑属性（如 margin-inline-start），仅在图标翻转等无逻辑等价物时才用 :dir()。
:dir() 不是自动翻转开关，它只匹配方向，不改变布局
写了 :dir(rtl) 但样式没生效？大概率是因为元素根本没被识别为 RTL。浏览器只根据两个来源计算方向：显式写的 dir="rtl"（比如 ），或内容含强 RTL 字符（如阿拉伯字母）且浏览器支持自动推断（Chrome/Firefox 可靠，Safari ≤15.3 不行）。lang="ar"、字体、内容语言本身，全都不影响 :dir() 匹配。
更隐蔽的问题是 SSR 场景：服务端没注入 dir 属性（例如模板输出的是 而非 ），那 CSS 解析时 :dir(rtl) 规则压根不会进入匹配队列——JS 后续加 dir 也晚了。
常见错误写法：
-
div:dir(rtl) { margin-left: 16px; }—— 在 RTL 下反而把间距加到“视觉左边”，错位 - 同时用
[dir="rtl"] .btn和.btn:dir(rtl)—— 两者匹配逻辑不同（属性 vs 计算方向），优先级相同，调试时无法分辨谁覆盖了谁
该用逻辑属性的地方，别依赖 :dir()
真正省心、少出错的方案是直接用逻辑属性，它们天然响应 dir，无需手写两套规则。
- 间距类：用
margin-inline-start替代margin-left，padding-block-end替代padding-bottom - 对齐类：用
text-align: start替代text-align: left，text-align: end替代text-align: right - 浮动/定位：用
float: inline-start替代float: left；伪元素定位用inset-inline-start替代left
这些属性在 LTR 下映射为左/上，在 RTL 下自动映射为右/下。你写一次，浏览器自动适配，比靠 :dir(rtl) 手动切换物理属性可靠得多。
必须用 :dir() 的场景：图标翻转、背景图镜像、letter-spacing 控制
有些东西没有逻辑等价物，只能靠方向条件手动控制：
- SVG 或内联图标的水平翻转：
.icon:dir(rtl) { transform: scaleX(-1); } - 箭头类背景图切换：
.arrow:dir(rtl) { background-image: url('arrow-right.svg'); }（LTR 用arrow-left.svg） -
letter-spacing需区分处理：阿拉伯语系需设为0，拉丁系可保留正值 ——[dir="ltr"] { letter-spacing: 1px; }+[dir="rtl"] { letter-spacing: 0; }更稳妥（因 Safari ≤17.3 对:dir()支持不全）
注意：transform: scaleX(-1) 会影响子元素文字方向，若图标含文本，需在子元素上重置 transform: scaleX(1)。
Safari 兼容性兜底和全局 dir 设置陷阱
Safari 直到 v17.4 才完全支持 :dir()，旧版必须降级到属性选择器：[dir="rtl"]。但要注意：[dir="rtl"] 不继承，只匹配硬编码属性的元素；而 :dir(rtl) 能捕获继承方向（比如 下所有未覆盖的子元素）。
全局 看似方便，实际极易破坏第三方组件库（Bootstrap、Ant Design 等），它们多数按 LTR 假设写死 padding-left、margin-right。更稳妥的做法是：
- 只在真正需要 RTL 的内容区加
dir="rtl"（如多语言切换后的） - UI 组件层保持 LTR 基线，用 CSS 自定义属性隔离方向逻辑（如
--text-dir: rtl） - 若必须全局切换，同步注入 RTL 专用样式表，重置所有方位相关属性
真正难的不是加 dir，而是判断哪一层该继承、哪一层该隔离、哪一层该用 —— 多数 bug 都出在“以为设了 dir="rtl" 就结束了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
