:dir(rtl)不是自动翻转开关，仅匹配计算方向为rtl的元素，必须由或强rtl字符触发；direction: rtl声明无效，lang属性无影响，ssr需服务端注入dir，旧版safari需回退[dir="rtl"]。
直接结论：:dir(rtl) 不是“自动翻转开关”，它只匹配计算后方向为 rtl 的元素，且必须依赖 HTML 的 dir 属性（或浏览器对强 RTL 字符的自动推断），CSS 中的 direction: rtl 完全不触发它。
为什么写了 :dir(rtl) 但样式完全不生效
浏览器不会“猜”方向，它只依据两个来源做计算：一是 HTML 元素显式写的 dir="rtl"（比如 ），二是根据内容中强 RTL 字符（如阿拉伯字母、希伯来字母）自动推断——这个行为在 Chrome/Firefox 中稳定，Safari ≤15.3 不可靠，Safari 17.4+ 才完整支持 :dir()。
lang="ar" 或 lang="he" 对 :dir() 匹配毫无影响；服务端渲染（SSR）页面若模板输出的是 而非 ，那客户端 JS 后续加 dir 也晚了——CSS 解析早已完成，:dir(rtl) 规则根本没进匹配队列。
常见误操作：
- 只在
或某个<div dir="rtl"> 上设 <code>dir：旧版 Safari 和多数表单控件（<input>光标、<select></select>下拉方向）要求必须从开始设，否则关键行为不翻转 - 以为
direction: rtl在 CSS 里声明就能让:dir(rtl)生效：它完全不响应纯 CSS 的direction声明 - 间距/边距：直接用
margin-inline-start/padding-inline-end，不用:dir()也能翻转；真要微调（比如 RTL 下加大右侧留白），再写.btn:dir(rtl) { margin-inline-end: 20px; } - 图标翻转：
transform: scaleX(-1)没有逻辑等价物，必须靠:dir()控制：.icon:dir(rtl) { transform: scaleX(-1); } - 浮动/定位：优先用
float: inline-start；若必须用物理值（比如兼容老浏览器），就写两套：.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)：前者只认硬编码的dir属性，后者认计算后的方向，两者来源不同、匹配范围不同，CSS 优先级又一样，调试时根本分不清谁覆盖了谁 - 在全局
下直接套用第三方组件库（如 Bootstrap、Ant Design）：它们默认按 LTR 设计，几乎不会监听:dir()或用逻辑属性，强行加dir会导致输入框清除按钮错位、下拉方向不翻转、光标行为异常 - 全局写
[dir="rtl"] svg { transform: scaleX(-1); }：会把箭头、勾选、数字都镜像，破坏可读性；应只针对语义性图标容器单独控制
:dir(rtl) 配合什么 CSS 属性最有效
优先用逻辑属性，物理属性仅作兜底。逻辑属性天然响应方向，不需要 :dir() 就能工作；:dir() 是为那些**没有逻辑等价物**的场景准备的。
推荐组合：
容易踩坑的混用场景
多个方向控制机制叠在一起，优先级和继承关系极易失控。
典型陷阱：
最常被忽略的一点：HTML 根元素的 dir 属性不是“可选优化”，而是 RTL 行为的**启动开关**。缺了它，:dir() 失效、屏幕阅读器朗读错乱、表单光标跳转异常、滚动条位置错误——这些都不是样式问题，而是底层渲染机制未激活。
