:dir(rtl)仅匹配计算后dir为rtl的元素，依赖显式dir="rtl"或强RTL字符推断，lang属性无效；SSR需服务端输出；优先用逻辑属性，:dir(rtl)仅用于补足如图标翻转等无逻辑等价物的场景。
:dir() 伪类本身不自动翻转布局，它只是个方向“开关”，镜像逻辑必须你手动写；直接套用物理属性（如 margin-right）在 :dir(rtl) 里反而会出错。
为什么 :dir(rtl) 样式不生效
浏览器只匹配计算后 dir 属性为 rtl 的元素，而这个计算结果只来自两个地方：HTML 中显式写的 dir="rtl"（比如 ），或浏览器根据强 RTL 字符（如阿拉伯字母、希伯来字母）自动推断——lang="ar" 完全不影响匹配。
- SSR 页面若服务端没注入
dir属性（比如模板输出的是而非），那客户端 JS 后续加dir也晚了——CSS 已解析完毕，:dir(rtl)规则压根没进匹配队列 - 局部设
或<div dir="rtl"> 不够：旧版 Safari 和部分表单控件（如 <code><input>光标、选区）要求必须从开始设dir="rtl"才能触发完整 RTL 感知机制 - Safari ≤15.3 对自动推断支持不可靠，建议始终显式声明
dir属性 - 间距/边距类：
margin-inline-start替代margin-left，padding-block-end替代padding-bottom——它们在 LTR/RTL/vertical-rl 下都指向语义上的“起始”或“结束”边 - 图标翻转：
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声明——必须由 HTMLdir属性或浏览器自动推断才触发匹配
:dir(rtl) 配合什么 CSS 属性最有效
优先用逻辑属性，物理属性仅作兜底。逻辑属性天然响应方向，无需靠 :dir() 冗余控制。
容易踩坑的混用场景
多个方向控制机制叠在一起，优先级和继承关系极易失控。
立即学习“前端免费学习笔记（深入）”；
真正麻烦的不是写 :dir(rtl)，而是当 writing-mode: vertical-rl 和 direction: rtl 同时存在时，inline-start 和 block-start 的物理含义会动态切换——这时候连“哪边是起始”都得重新推演一遍，不画图+不实测很容易翻车。
