:dir()伪类仅检测元素自身dir属性值（ltr/rtl），不继承、不依赖lang或html全局dir，用于精准匹配显式声明的RTL/LTR元素，需配合逻辑属性实现可维护RTL支持。
:dir() 伪类在 RTL 场景下的实际作用
:dir() 不是用来“翻转布局”的，它只是检测元素的 dir 属性值（ltr 或 rtl），并据此匹配样式。它不会自动把 margin-left 变成 margin-right，也不会改变 flex 排序方向——这些必须手动写规则。它的价值在于：当页面语言切换、或某段文本显式声明了 dir="rtl"（比如阿拉伯语段落嵌在英文页中），你能精准命中这类节点，避免用笨重的 class 控制或 JS 注入。
:dir(ltr) 和 :dir(rtl) 的匹配逻辑与常见误判
匹配只看元素自身的 dir 属性，**不继承**，也不看 lang 属性或 html 标签的全局 dir。例如：
<p dir="rtl">مرحبا</p> <p>Hello</p>
上面第一段会匹配 :dir(rtl)，第二段即使父级 html dir="rtl" 也不会匹配——除非它自己也写了 dir="rtl"。容易踩的坑包括：
- 误以为
:dir(rtl)能匹配所有阿拉伯语内容，其实必须显式加dir="rtl"属性 - 在 Next.js 等 SSR 框架里，服务端渲染时若没同步注入
dir属性，客户端 JS 补上后 CSS 已经计算完毕，样式可能不生效 - 和
[dir="rtl"]选择器功能重复，但优先级略低；若已有大量属性选择器，没必要强切:dir()
配合逻辑属性实现真正可维护的 RTL 支持
单独用 :dir(rtl) 写样式是治标。真正适配 RTL，应优先改用逻辑属性（logical properties），再用 :dir() 做兜底或特殊干预。例如：
立即学习“前端免费学习笔记（深入）”；
/* 推荐：用逻辑属性，一份代码通吃 */
.text { margin-inline-start: 1rem; }
<p>/<em> 必须用物理属性时，用 :dir() 分离 </em>/<br />
.button { padding-left: 12px; padding-right: 12px; }<br />
.button:dir(rtl) { padding-left: 0; padding-right: 12px; }<br />
.button:dir(ltr) { padding-left: 12px; padding-right: 0; }注意：padding-left/padding-right 这类物理属性在 RTL 下语义已错位，应尽量替换成 padding-inline-start/padding-inline-end。只有当目标浏览器不支持逻辑属性（如旧版 Safari）时，才用 :dir() 回退。
浏览器兼容性与构建时的现实约束
:dir() 在 Chrome 89+、Firefox 65+、Safari 15.4+ 中稳定支持，Edge 从 90 开始。但如果你项目仍需兼容 Safari ≤15.3 或 Android WebView ≤75，就得放弃它，改用 [dir="rtl"] 或 class 切换方案。另外，PostCSS 插件（如 postcss-dir-pseudo）目前**无法安全编译** :dir()，因为其行为依赖运行时 DOM 属性，不能静态展开——别指望它能帮你生成兼容代码。
最常被忽略的一点：CSS 的 :dir() 匹配发生在样式计算阶段，而很多前端 i18n 库（如 next-intl）是在 JS 层动态设置 dir 属性的。如果 JS 执行晚于 CSS 加载，首屏会出现短暂的 LTR 样式闪动。解决方式不是加 !important，而是确保 html 标签在 HTML 字符串中就带正确 dir 属性（SSR 必须输出）。
