直接结论：:dir(rtl)仅匹配显式dir="rtl"或强RTL字符推断的元素，不响应direction: rtl或lang属性；必须从<html dir="rtl">起始，并配合margin-inline-start等逻辑属性实现真正适配，物理属性不会自动翻转。
直接结论：用 :dir(rtl) 做条件判断 + 逻辑属性（如 margin-inline-start）做布局，而不是靠 direction: rtl “自动翻转”整个页面。
为什么 :dir(rtl) 样式不生效？
浏览器不会根据文字内容“猜”方向。它只匹配两种情况下的元素：dir="rtl" 显式写在 HTML 上（比如 <html dir="rtl">），或浏览器基于强 RTL 字符（阿拉伯、希伯来字母）自动推断——但 Safari ≤15.3 不可靠，且纯英文页面加了阿拉伯语单词也不会触发。
- 没在根元素或目标元素上设
dir="rtl"，:dir(rtl)就是死的 - 写了
direction: rtl但没配dir属性，:dir(rtl)依然不匹配 - Safari 15.3 及更早版本对自动推断支持极弱，必须显式写
dir
用 margin-inline-start 替代 margin-left 才真正适配
物理属性（left/right）在 RTL 下不会自动“换边”，它们只是字面意思；逻辑属性才绑定书写方向。比如 margin-inline-start 在 LTR 下等于 margin-left，在 RTL 下等于 margin-right，语义始终一致。
-
margin-left→ 改成margin-inline-start -
padding-right→ 改成padding-inline-end -
text-align: right→ 改成text-align: end -
border-top-left-radius没有对应逻辑属性，得用:dir(rtl) { border-top-right-radius: 8px; }手动覆盖
图标和 SVG 怎么跟着翻转？
SVG 和字体图标默认不响应 direction 或 :dir()，硬加 transform: scaleX(-1) 会把文字也镜像，破坏可读性。
立即学习“前端免费学习笔记（深入）”；
- 纯装饰性图标可用
:dir(rtl) .icon { transform: scaleX(-1); } - 含文字或需点击热区精准的图标，应单独提供 RTL 版本 SVG，或用
:dir(rtl) .icon { transform: rotateY(180deg); } - 避免全局写
[dir="rtl"] svg { transform: scaleX(-1); }——数字、箭头、勾选都会错乱
别指望 direction: rtl 翻转一切
direction: rtl 只影响逻辑方向相关行为：块流顺序、text-align、margin/padding 的 -left/-right 映射、flex-direction: row 主轴方向。它对 background-position、transform: translateX()、clip-path、border-radius 完全无感。
- 想让背景图始终锚定“起始侧”，不能写
background-position: left top，得用background-position: inline-start top（注意：该值仅部分浏览器支持，稳妥做法仍是:dir(rtl) { background-position: right top; }） -
float: left在direction: rtl容器里会贴右，但这不是“翻转”，是方向上下文切换的结果；依赖它做布局容易在嵌套中失控 - 最易被忽略的是：逻辑属性的浏览器支持已很成熟（Chrome 87+、Firefox 89+、Safari 15.4+），但
inline-start类背景定位等高级用法仍需降级兜底
