[dir="rtl"]仅匹配显式设置该属性的元素，不继承、不推断方向；:dir(rtl)则基于浏览器计算出的实际方向（含继承和内容推断）精准匹配所有rtl环境下的元素。
:dir(rtl) 是目前最可靠的方式，但必须配合 HTML 的 dir 属性或浏览器自动推断方向才能生效；单独写 [dir="rtl"] 会漏掉大量继承方向的元素。
为什么 [dir="rtl"] 选不到子元素？
这个选择器只匹配「显式写了 dir="rtl"」的元素，不继承、不推断。比如 <p>文字</p> 中的 <p></p> 根本不会被 [dir="rtl"] p 匹配到——它没写 dir 属性，哪怕父级设了也没用。
:dir(rtl) 则不同：它读的是浏览器最终计算出的方向值，包括来自祖先 dir 属性、direction CSS 声明，甚至纯文本内容（如阿拉伯字符）触发的自动推断。所以：
-
p:dir(rtl)能命中所有实际处于 RTL 文本流中的段落 -
.icon:dir(rtl)可让图标在任意 RTL 上下文中自动翻转 - 不用给每个子元素手动加
dir="rtl"，避免模板污染
:dir(rtl) 在主流浏览器里怎么开？
截至 2026 年 6 月，支持情况已稳定，但仍有启用细节要确认：
- Firefox：开箱即用，无需额外操作
-
Chrome 91+：默认开启实验性支持，但需检查
chrome://flags/#enable-experimental-web-platform-features是否启用 - Safari 17.4+：完全支持；旧版 Safari（如 16.x）不支持，会直接忽略该规则（安全降级）
不支持时整条规则被丢弃，所以可以放心叠加使用，但别把它当作唯一适配手段。
哪些场景必须用 :dir(rtl)，哪些该用逻辑属性？
逻辑属性（如 margin-inline-start）天然响应方向，优先用它们；:dir(rtl) 是补位工具，专治逻辑属性覆盖不了的地方：
- 需要物理翻转的场景：
.arrow:dir(rtl) { transform: scaleX(-1); } - 旧代码无法改写时：
.sidebar:dir(rtl) { float: right; }（比维护两套float: left/right更可控） - Flex 顺序调整：
.list:dir(rtl) { flex-direction: row-reverse; }，但注意这会影响nth-child()和可访问性顺序 - 千万别混用：
[dir="rtl"] .btn和.btn:dir(rtl)同时存在，容易因优先级或覆盖顺序出错
服务端渲染（SSR）中 :dir(rtl) 失效的真正原因
不是 CSS 写错了，而是服务端生成 HTML 时没带 dir 属性。比如多语言站点用英文模板 SSR，dir 靠客户端 JS 补上——此时 CSS 已加载完毕，:dir(rtl) 规则早已失效。
解决办法很实在：
- 确保 SSR 模板根据当前语言主动注入
或 - 不要依赖 JS 运行后才设置
document.documentElement.setAttribute('dir', 'rtl') - 若必须动态切换，得提前把
:dir(rtl)规则写进预置样式表，不能靠 JS 插入<style></style>
第三方组件库（如 Ant Design）基本不响应 :dir()，强行加 dir="rtl" 只会让图标、按钮、表单标签错位——这时候更稳妥的做法是封装一层 wrapper，用逻辑属性重写关键间距和对齐，再辅以少量 :dir(rtl) 修正物理翻转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
