:dir(rtl) 仅匹配浏览器计算出方向为rtl的元素，依赖显式dir="rtl"或强RTL字符推断，lang属性无效；SSR需服务端输出html dir="rtl"；优先用逻辑属性，:dir(rtl)用于补足如图标翻转等场景；避免与[dir="rtl"]混用。
:dir(rtl) 不是“自动翻转开关”，它只在浏览器计算出元素方向为 RTL 时才匹配——这意味着你必须先让元素真正处于 RTL 环境里，否则规则压根不会生效。
为什么写了 :dir(rtl) 但样式完全不触发
常见错觉是：只要 HTML 里有阿拉伯文字，:dir(rtl) 就该生效。事实不是这样。
-
:dir(rtl)只匹配「浏览器最终计算出方向为 rtl」的元素，依据只有两个：显式dir="rtl"属性（如<html dir="rtl">），或内容含强 RTL 字符（如阿拉伯字母、希伯来字母）且浏览器支持推断（Chrome/Firefox OK，Safari ≤15.3 不可靠） -
lang="ar"或lang="he"对:dir()完全无影响，别混用 - SSR 页面若服务端没输出
<html dir="rtl">，而靠客户端 JS 后续加，那 CSS 已解析完毕，:dir(rtl)规则根本没进匹配队列 - 局部设
<body dir="rtl">或<div dir="rtl">不够：旧版 Safari 和部分表单控件（如<input>光标、选区）要求必须从<html>开始设才能触发完整 RTL 感知
:dir(rtl) 配合哪些 CSS 属性最有效
优先用逻辑属性，物理属性仅作兜底；:dir(rtl) 的价值在于补逻辑属性覆盖不到的地方。
- 间距/边距类：
margin-inline-start/padding-inline-end天然响应方向，无需:dir()—— 直接替换掉margin-left/padding-right - 图标翻转：
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"] 混用导致样式失控
两者来源不同、匹配范围不同、CSS 优先级又一样，调试时根本分不清谁覆盖了谁。
立即学习“前端免费学习笔记（深入）”；
-
[dir="rtl"]只匹配「自己写了dir="rtl"」的元素，不继承、不推断；:dir(rtl)匹配所有实际处于 RTL 环境的元素（含继承、含内容推断） - 比如
<body dir="rtl"><p>نص</p></body>中，[dir="rtl"] p选不到<p>，但p:dir(rtl)可以 - 第三方组件库（如 Bootstrap、Ant Design）多数按 LTR 假设写死
padding-left、margin-right，全局加<html dir="rtl">后，它们的样式会直接错位；强行叠加:dir(rtl)覆盖容易因选择器权重或顺序出错
真正难的不是写几行 :dir(rtl)，而是判断哪一层该用逻辑属性、哪一层必须靠条件覆盖、哪一层该隔离方向——多数问题都出在“以为加了 dir="rtl" 就万事大吉”，结果光标跳错、输入反向、复制粘贴顺序颠倒，而这些行为根本不受 CSS 控制。
