[dir="rtl"] 仅为条件选择器，需手动重写left/right等物理属性；其匹配依赖html dir属性而非css direction声明，且存在ssr、浏览器兼容及组件库支持等多重失效场景。

[dir="rtl"] 选择器本身不会自动翻转布局，它只是个“条件开关”——你得手动写翻转逻辑，否则所有 left/right 物理属性照旧生效，页面照样错乱。

为什么 [dir="rtl"] 常常没反应

浏览器只在元素**计算后确定方向为 rtl** 时才匹配该选择器。常见失效原因：

• [dir="rtl"] 不匹配 direction: rtl 声明的元素 —— 必须是 HTML 的 dir 属性（最好是 ）
• 服务端渲染（SSR）页面若初始 HTML 没带 dir="rtl"，客户端 JS 后补也晚了：CSS 已解析完毕，规则压根没进匹配队列
• 局部加 <div dir="rtl"> 在旧版 Safari 中无法触发表单光标、选区、滚动条等底层 RTL 行为<li>第三方组件库（如 Ant Design、Bootstrap 默认版）压根没写 <code>[dir="rtl"] 规则，仅靠这个选择器无法修复它们的样式

哪些 CSS 属性必须配合 [dir="rtl"] 手动重写

这些物理属性不会随 dir 自动切换，不处理就会导致图标错位、间距反向、定位偏移：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• margin-left → 改成 [dir="rtl"] .btn { margin-right: 12px; }（同时清掉原 margin-left）
• float: left → 改成 [dir="rtl"] .sidebar { float: right; }
• left: 20px（绝对定位）→ 改成 [dir="rtl"] .tooltip { right: 20px; }
• background-position: left top → 改成 [dir="rtl"] .icon { background-position: right top; }
• text-align: left → 改成 [dir="rtl"] p { text-align: right; }（注意：text-align: end 更推荐，但需兼容性兜底）

比 [dir="rtl"] 更省事的替代方案

纯靠属性选择器写两套样式维护成本高，优先用现代逻辑属性：

• 用 margin-inline-start 替代 margin-left：它天然响应 dir，无需 [dir="rtl"] 包裹
• 图标翻转用 transform: scaleX(-1) + :dir(rtl)（比 [dir="rtl"] 更精准，且支持继承）
• Grid 列序翻转别依赖 [dir="rtl"]，直接写 grid-auto-flow: row-reverse 更可控
• Bootstrap 5 等框架必须用 ms-3/me-3 类名，并引入 bootstrap.rtl.min.css，否则 [dir="rtl"] 无效

真正难的不是写 [dir="rtl"]，而是判断哪些地方该用它、哪些该换逻辑属性、哪些该隔离进 <bdi></bdi> —— 多数布局崩坏，都始于把 [dir="rtl"] 当成万能开关，结果 margin 和 float 还在左，文字却往右跑。