:dir(rtl) 仅匹配显式 dir="rtl" 或浏览器自动推断的 rtl 元素，不响应 direction: rtl；需配合逻辑属性（如 margin-inline-start）或手动写两套规则，并确保 html 根元素设 dir 属性。

:dir(rtl) 不是自动翻转开关，它只提供方向条件，镜像逻辑必须你手动写。直接加 :dir(rtl) { margin-right: 16px; } 不会“自动翻转”，反而可能在 RTL 下把间距加错边。

为什么写了 :dir(rtl) 但样式不生效

浏览器不会“猜”方向。它只匹配计算后 dir 为 rtl 的元素，而计算依据只有两个：HTML 中显式写的 dir="rtl"（如 ），或浏览器根据强 RTL 字符（如阿拉伯字母、希伯来字母）自动推断（Chrome/Firefox 支持，Safari ≤15.3 不可靠）。lang="ar" 或 lang="he" 完全不影响匹配。

• SSR 页面若服务端没注入 dir 属性（比如模板默认输出 而非 ），那客户端 JS 后续加 dir 也晚了——CSS 已解析完毕，:dir(rtl) 规则压根没进匹配队列
• 局部设 或 <div dir="rtl"> 不够：旧版 Safari 和部分表单控件（如 <code><input> 光标、选区）要求必须从 开始设 dir="rtl" 才能触发完整 RTL 感知机制

  :dir(rtl) 配合什么 CSS 属性最有效

  优先用逻辑属性，物理属性仅作兜底。

  

  CSS婚礼策划服务机构宣传网站模板

  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 更安全；但若必须用物理值，就写两套：.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 设计，几乎不会监听 :dir() 或用逻辑属性，强行加 dir 会导致输入框清除按钮错位、下拉方向不翻转、光标行为异常等问题
  • :dir(rtl) 不响应纯 CSS 的 direction: rtl 声明——必须由 HTML dir 属性或浏览器自动推断触发；也不能嵌套使用，如 div:dir(rtl) span:dir(ltr) 是无效的

  真正难的不是写对一条 :dir(rtl) 规则，而是让整个样式系统在 dir 切换时保持一致——尤其是表单控件、伪元素、混合文本（如阿拉伯语段落里的 URL）和第三方库集成这些地方，稍不留神就会漏掉一两个点，导致用户看到错乱的布局或不可用的交互。