根本原因是浏览器未将元素识别为RTL上下文，:dir(rtl)仅匹配计算后方向为rtl的元素，依赖dir="rtl"属性或强RTL字符，且Safari≤15.3不支持自动推断。
为什么写了 :dir(rtl) 但样式没生效
根本原因不是选择器写错了，而是浏览器根本没把目标元素识别为 RTL 上下文。:dir(rtl) 只匹配「计算后方向为 rtl」的元素，而计算依据只有两个：显式 dir="rtl" 属性（如 ），或内容含强 RTL 字符（阿拉伯/希伯来字母）且浏览器支持自动推断（Chrome/Firefox 可靠，Safari ≤15.3 不行）。lang="ar" 完全无效，别混用。
常见踩坑点：
- 服务端渲染（SSR）页面没在 HTML 初始状态注入
dir="rtl"，等 JS 后续补上时 CSS 已解析完毕，规则压根没参与匹配 - 只在
或局部<div> 加了 <code>dir，但旧版 Safari 和部分表单控件（比如<input>光标行为）要求必须从根节点开始设才触发完整 RTL 感知 - 用了第三方 UI 库（如 Bootstrap、MUI），它们默认按 LTR 设计，全局加
会导致 margin-left 等物理属性被反向解释，图标错位甚至溢出 -
margin-inline-start替代margin-left：LTR 下生效于左，RTL 下自动映射到右 -
padding-inline-end替代padding-right：始终作用于当前文本流末尾 -
text-align: start替代text-align: left：对齐到书写方向起始侧 - 背景图翻转：
background-position: right center;在 LTR 下合理，但在 RTL 下要改成left center，就得写两遍：.icon:dir(ltr) { background-position: right center; } .icon:dir(rtl) { background-position: left center; } - 某些未被逻辑属性覆盖的 corner 类型值，如
border-top-left-radius没有标准 logical 对应项，只能靠 :dir() 切 class 或 JS 检测 - 新项目统一用
:dir(rtl)，构建时通过 PostCSS 插件自动注入回退规则 - 老项目若无法升级工具链，就坚持用
[dir="rtl"]，别掺杂 :dir() —— 一致性比“看起来新”更重要 - 避免在同一个样式块里同时出现两种写法，哪怕加了注释也难保后续维护者不误改
- 必须成对操作：先移除旧
dir值，再设新值，否则部分浏览器（特别是 Safari）可能卡在中间态，导致 :dir() 匹配失效或表单光标异常 - 如果用了逻辑属性（如
margin-inline-start），改dir后样式会自动响应，无需 JS 干预布局 - 但若有图标旋转、SVG
transform、background-position等硬编码物理值，就得监听dir变更，手动切 class 或内联 style - 别忘了可访问性：屏幕阅读器靠
dir决定朗读顺序，JS 切换后要触发aria-live提示，否则视障用户感知不到语言已切换
:dir(rtl) 配合什么 CSS 属性才真正起效
它本身不翻转任何东西，只是个条件开关——你得手动告诉浏览器“在 RTL 下该怎么做”。最稳妥路径是优先用逻辑属性，它们天然响应方向，几乎不需要 :dir()：
只有少数场景需 :dir() 双写物理属性，比如：
立即学习“前端免费学习笔记（深入）”；
和 [dir="rtl"] 混用会出什么问题
别混。两者机制不同：[dir="rtl"] 是属性选择器，只匹配显式写了该属性的元素；:dir(rtl) 是伪类，匹配「计算后方向为 rtl」的所有元素（包括继承来的）。混用容易导致样式重复、覆盖混乱，尤其在组件库嵌套场景下。
更麻烦的是兼容性断层：Safari 直到 v17.4 才完全支持 :dir()，旧版本必须回退到 [dir="rtl"]。但直接并列写 .btn:dir(rtl), .btn[dir="rtl"] 会让现代浏览器多解析一次无用规则，还可能因 specificity 差异引发意外交互。
推荐做法：
动态切换 RTL/LTR 时 JavaScript 怎么配合
关键不是改 document.documentElement.dir 这一行，而是确保所有依赖方向的逻辑同步更新：
最易被忽略的是第三方脚本——比如分析 SDK、广告代码、字体加载器，它们可能在 DOM 就绪后静态读取 document.dir，之后不再响应变更。这类必须在初始化前就确定方向，或强制 reload 脚本。
