:dir(rtl) 仅匹配计算方向为 rtl 的元素，依赖 初始声明或强 RTL 字符触发，CSS direction、lang 或 JS 设置均无效；Safari ≤15.3 不支持，须服务端首字节输出 确保生效。
:dir(rtl) 不是自动翻转开关，它只匹配计算后方向为 rtl 的元素，且必须由 显式声明或强 RTL 字符（如阿拉伯字母）触发；direction: rtl 的 CSS 声明、lang 属性、JS 后续设置 element.dir 都无效。
为什么 :dir(rtl) 样式完全不生效
浏览器压根没把目标元素识别为 RTL 元素——:dir() 匹配的是「计算方向」，而这个计算只依赖两个来源：
-
必须在 HTML 模板初始输出时就存在；服务端渲染（SSR）页面若只输出，等客户端 JS 补上dir="rtl"时，CSS 已解析完毕，规则根本没参与匹配 - 浏览器根据内容中首个强 RTL 字符（如
ا、ה）自动推断方向：Chrome/Firefox 稳定支持，Safari ≤15.3 不可靠，Safari 17.4+ 才完整支持 -
lang="ar"或lang="he"对:dir()匹配无任何影响 - 仅给
或某个是不够的：旧版 Safari 和原生表单控件（如光标行为、清除按钮位置）要求必须从开始设dir，否则关键行为不翻转:dir(rtl)应该配合哪些 CSS 属性用优先用逻辑属性，让浏览器自己算方向；
:dir()只用于没有逻辑等价物的场景：- 边距/内边距：
margin-inline-start/padding-inline-end天然响应方向，不用:dir()就能翻转；真要微调（比如 RTL 下右侧留白加大），再写.btn:dir(rtl) { margin-inline-end: 20px; } - 图标翻转：
transform: scaleX(-1)没有逻辑等价物，必须靠:dir(rtl)控制：.icon:dir(rtl) { transform: scaleX(-1); } - 浮动/定位：优先用
float: inline-start；若需兼容老浏览器，就写两套：.sidebar:dir(ltr) { left: 0; }和.sidebar:dir(rtl) { right: 0; } - 慎用
text-align：text-align: start已天然响应方向，单独写text-align: right在:dir(rtl)里是冗余的；真要覆盖，优先改direction或用text-align: start
容易踩坑的混用场景
多个方向控制机制叠在一起，继承和优先级极易失控：
- 同时存在
[dir="rtl"] .btn和.btn:dir(rtl)：前者只认硬编码的dir属性，后者认计算后的方向，两者来源不同、匹配范围不同，CSS 优先级又一样，调试时根本分不清谁覆盖了谁 - 在全局
下直接套用未适配 RTL 的第三方组件库（如 Bootstrap、Ant Design）：它们默认按 LTR 设计，几乎不监听:dir()或用逻辑属性，会导致输入框清除按钮错位、下拉方向不翻转、光标从左进等异常 - 以为
:dir(rtl) { margin-right: 16px; }能“自动翻转”：它不会，反而在 RTL 下把间距加到了物理右侧（即视觉左侧），和预期完全相反
最易被忽略的点是：Safari ≤15.3 完全不支持
:dir()，必须回退到[dir="rtl"]；但这个回退选择器不匹配浏览器自动推断的方向，所以若依赖字符推断（如用户输入阿拉伯语），[dir="rtl"]也会失效。真正可靠的起点，永远是服务端确保出现在首字节。 - 边距/内边距：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
