:dir(rtl) 失效的根本原因是浏览器仅依据 dir="rtl" 属性或强RTL字符推断方向，无视 lang、CSS direction 或 JS 设置；必须从 <html dir="rtl"> 起始，配合逻辑属性（如 margin-inline-start）才能正确响应RTL布局。
为什么 :dir(rtl) 样式不生效
根本原因不是写错了选择器，而是浏览器压根没把它当 RTL 元素处理。:dir(rtl) 只匹配「计算后 dir 值为 rtl」的元素，而这个计算只依赖两件事：dir="rtl" 属性显式声明，或浏览器根据内容里的强 RTL 字符（如阿拉伯字母、希伯来字母）自动推断。它完全无视 lang="ar"、direction: rtl 或 JS 后续设置的 element.dir = 'rtl'。
常见失效场景：
- SSR 页面服务端没在
<html>上注入dir="rtl"，等 JS 在客户端补上时，CSS 已解析完毕，:dir() 规则早被跳过了 - 只给
<body dir="rtl">或某个<div dir="rtl">，但旧版 Safari 和部分表单控件（比如<input>的光标行为）要求必须从<html>开始设才触发完整 RTL 感知 - 用了
[dir="rtl"]和:dir(rtl)混用，前者只认硬编码属性，后者认计算结果，来源不同、匹配范围不同，调试时样式覆盖关系极难理清
:dir(rtl) 必须配合逻辑属性才真正省力
直接写 :dir(rtl) { margin-right: 16px; } 是危险操作——它不会“自动翻转”，反而在 RTL 下把间距加到了物理右侧，也就是视觉上的左边，和预期完全相反。
正确做法是优先用逻辑属性，让浏览器自己算：
立即学习“前端免费学习笔记（深入）”；
- 边距：用
margin-inline-start替代margin-left，用margin-inline-end替代margin-right - 浮动：用
float: inline-start替代float: left - 文本对齐：
text-align: start已天然响应方向，不需要再写:dir(rtl) { text-align: right; }
只有逻辑属性搞不定的地方，才轮到 :dir() 出手，比如图标翻转：.icon:dir(rtl) { transform: scaleX(-1); }
Tailwind 用户注意：rtl: 变体不响应 class 切换
rtl:ml-4 这类变体只在 HTML 元素有 dir="rtl"（或根元素 [dir="rtl"]）时才生成并生效。用 JS 动态加 class="rtl" 完全无效——Tailwind JIT 模式根本不会为此生成对应 CSS。
必须做的两件事：
- 服务端或初始化阶段设置
document.documentElement.dir = 'rtl'，确保根元素带属性 - 字体配置别覆盖默认 theme：
extend.fontFamily下新增arabic、chinese等键，而不是重写theme.fontFamily.sans，否则font-serif会直接消失 - 中文字体名必须加双引号：
'"Noto Sans SC"'，否则编译后 CSS 解析失败
:lang() 和 :dir() 不要混着用做同一目标
:lang(ar) 匹配的是 lang="ar" 属性，只管语言；:dir(rtl) 匹配的是方向计算结果，只管布局流向。阿拉伯语（ar）、希伯来语（he）、波斯语（fa）确实都是 RTL，但乌尔都语（ur）也是 RTL 却没被 :lang() 覆盖，而某些 LTR 场景下也可能临时用到阿拉伯数字（比如英文报告里的统计表格），这时 :lang(ar) 会误匹配。
更稳的分工是：
- 用
:lang()控制字体、颜色、特殊符号（比如p:lang(zh) { text-indent: 2em; }） - 用
:dir()控制布局流向、边距、翻转、定位 - 二者可组合，但目的要清晰：
.alert:lang(ar):dir(rtl) { padding-inline-start: 24px; }
真正容易被忽略的是：所有这些规则都依赖 <html dir="xxx"> 这个起点。漏掉它，后面再精细的逻辑属性和 :dir() 都只是摆设。
