:dir() 不是自动镜像开关，仅提供方向条件，镜像逻辑需手动实现；它只匹配显式 dir="rtl" 或强RTL字符推断的方向，不响应 lang 属性，SSR未注入 dir 则样式不生效；应优先使用逻辑属性，慎用物理属性和 text-align。
:dir() 不是自动镜像开关，它只提供方向条件，镜像逻辑必须你手动写。直接加 :dir(rtl) { margin-right: 16px; } 不会“自动翻转”，反而可能在 RTL 下把间距加错边——真正起作用的是你是否用对了属性和上下文。
为什么 :dir(rtl) 写了但样式不生效
常见错误是以为浏览器会“猜”方向。它不会。
-
:dir(rtl)只匹配计算后方向为rtl的元素，而计算依据只有两个：HTML 中显式写的dir="rtl"（如），或浏览器根据强 RTL 字符（如阿拉伯字母）自动推断（Chrome/Firefox 支持，Safari ≤15.3 不可靠） -
lang="ar"或lang="he"完全不影响:dir()匹配，别混用 - SSR 页面若服务端没注入
dir属性（比如模板默认输出而非），那客户端 JS 后续加dir也晚了——CSS 已解析完毕，:dir(rtl)规则压根没进匹配队列
:dir(rtl) 配合什么 CSS 属性最有效
优先用逻辑属性，物理属性仅作兜底。
- 间距/边距类：用
margin-inline-start/margin-inline-end替代margin-left/margin-right，它们天然响应方向，无需:dir() - 图标翻转：
transform: scaleX(-1)没有逻辑等价物，必须靠:dir(rtl)控制：.icon:dir(rtl) { transform: scaleX(-1); } - 浮动/定位：
float: inline-start比float: left更安全；但若必须用left/right，就写两套：.sidebar:dir(ltr) { left: 0; } .sidebar:dir(rtl) { right: 0; } - 慎用
text-align：它本身已响应direction，单独写text-align: right在:dir(rtl)里是冗余的；真要覆盖，优先改direction或用text-align: start
容易踩坑的混用场景
多个方向控制机制叠在一起，优先级和继承关系极易失控。
- 避免同时存在
[dir="rtl"] .btn和.btn:dir(rtl)：前者只认硬编码属性，后者认计算方向，两者来源不同、匹配范围不同，CSS 优先级又一样，调试时根本分不清谁覆盖了谁 - 别在全局
下直接套用第三方组件库（如 Bootstrap、Ant Design）：它们多数按 LTR 假设写死padding-left、margin-right，一开 RTL 就错位。更稳妥的是只给内容区加dir="rtl"，UI 组件保持 LTR 基线 + 用 CSS 自定义属性隔离方向逻辑 - Safari 兼容性要兜底：v17.4 才完全支持
:dir()，旧版需回退到[dir="rtl"]，且不能依赖自动推断——必须显式写dir="rtl"
真正难的不是写出 :dir(rtl) 这行代码，而是判断哪一层该由 HTML dir 控制、哪一层该交给 CSS 逻辑属性、哪一层必须用 :dir() + 物理属性硬切——漏掉任一环，镜像就会在某个组件里突然卡住，比如滚动条跑到左边但 overflow-x 没同步调整。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
