不能只靠[dir="rtl"]选择器，因为它仅匹配显式设置dir="rtl"的元素，无法捕获继承或浏览器自动推断RTL方向的元素；:dir(rtl)则基于实际文本流方向匹配，支持继承与自动推断，且在主流浏览器中已逐步支持。
为什么不能只靠 [dir="rtl"] 选择器？
因为 [dir="rtl"] 只能匹配显式写了 dir="rtl" 的元素，而无法捕获那些没写但继承了 RTL 方向的子元素（比如 <body dir="rtl"> 下的 <p>）。更麻烦的是，如果用户系统语言是阿拉伯语、希伯来语，浏览器可能自动推断方向，但 HTML 里根本没加 dir 属性——这时候 [dir="rtl"] 完全失效。:dir(rtl) 的价值就在这里：它不看属性有没有写，只看「当前元素实际参与的文本流方向」，哪怕方向来自祖先或浏览器自动推断，也能命中。
:dir(rtl) 在 Chrome/Safari/Firefox 中怎么用才不白写？
截至 2026 年 5 月，Firefox 已正式支持；Chrome 91+ 和 Safari 17+ 默认开启实验性支持，但需确认是否启用：
- Chrome：访问
chrome://flags/#enable-experimental-web-platform-features，确保开启 - Safari：在「开发 → 实验性功能」中勾选
:dir() pseudo-class - Firefox：无需额外操作，开箱即用
不支持时，:dir(rtl) 规则会被整个忽略（安全降级），所以可以放心叠加使用，但别把它当作唯一样式入口。
镜像布局时，:dir(rtl) 配合哪些 CSS 属性最有效？
物理属性（如 float: left、margin-right）在 RTL 下必须翻转，但硬编码 left/right 会埋坑。推荐组合：
立即学习“前端免费学习笔记（深入）”；
- 用逻辑属性替代物理属性：
margin-inline-start自动对应 LTR 的margin-left、RTL 的margin-right，无需:dir() - 对必须用物理属性的旧代码，用
:dir(rtl)显式覆盖：.btn:dir(rtl) { float: right; } - 处理 flex 顺序：
.list:dir(rtl) { flex-direction: row-reverse; }，但注意这会影响所有子项顺序，慎用于含交互的列表 - 图标方向反转：
.icon-arrow:dir(rtl) { transform: scaleX(-1); }，比重写background-position更可靠
容易被忽略的兼容性细节和陷阱
:dir(rtl) 不是万能胶，几个关键限制必须记牢：
- 它只响应「文本方向」，不响应
direction: rtl这类纯 CSS 声明——必须由 HTMLdir属性或浏览器自动推断触发 - 不能嵌套使用，比如
div:dir(rtl) span:dir(ltr)是无效的；子元素若显式设dir="ltr"，它自己会匹配:dir(ltr)，但父选择器不会“穿透” - 伪元素内容方向也要单独处理：
::before:dir(rtl)不生效，得写成[dir="rtl"] .el::before或用content: attr(data-rtl-icon)动态注入 - BEM 类名本身不用改，但修饰符命名建议避开
--rtl这类物理描述，改用语义化名如--mirror或--reversed
真正复杂的地方在于：你永远不知道某个 <span> 是靠继承、属性、还是自动检测获得 RTL 方向——:dir(rtl) 能帮你统一响应，但前提是得理解它的触发边界在哪。
