html 的 dir 属性优先级高于 css direction；浏览器优先读取元素自身的 dir 值，再回退到继承或样式声明，且 dir 属性会覆盖 direction 样式。
dir 属性和 direction 样式谁优先级更高？
HTML 的 dir 属性优先级高于 CSS direction。浏览器会先读取元素自身的 dir 值（如 <p dir="rtl"></p>），再 fallback 到父级继承或样式表声明。
常见错误现象：div { direction: rtl; } 包裹一个 <input>，但输入框内光标仍从左开始——因为 <input> 没显式设 dir，它不继承父容器的 CSS direction，只继承 HTML dir（若父级也没设，则用默认 ltr）。
- 对表单控件、
<textarea></textarea>等原生元素，直接加dir="rtl"最可靠 - CSS
direction更适合控制块级容器内文本流、表格列序、溢出滚动条位置等 - 若同时写了
dir="ltr"和direction: rtl，前者生效；反之亦然
direction 不生效？先查 computed styles 的 origin
direction 看似没起作用，大概率是被祖先元素的 dir 或 direction 继承覆盖了。CSS 的 direction 是可继承属性，且继承链优先于局部声明。
实操建议：
- 打开开发者工具 → 选中目标元素 → 查看
Computed面板里的direction行，重点看右侧origin是inherited还是specified - 逐层往上点父节点，确认哪个节点最先设了
dir="rtl"或direction: rtl - 需要强制隔离时，给目标元素加
dir="ltr"（比direction: ltr !important更干净）
RTL 布局中 margin-left/margin-right 还能用吗？
不能依赖 margin-left 和 margin-right 控制 RTL 下的间距。它们始终按物理方向生效：在 direction: rtl 容器里，margin-right: 10px 仍是往屏幕右边推 10px，而视觉上“右边”已变成内容起始侧。
真正随文本方向翻转的是逻辑方位属性：
- 用
margin-inline-start替代margin-left（即“行内起始边”，LTR 下 = 左，RTL 下 = 右） - 用
padding-inline-end替代padding-right - Flex/Grid 中的
justify-content: flex-start的start指的是 inline-start，不是物理左 - IE 不支持逻辑方位属性，需用 JS 检测
document.dir后动态切 class
input 光标和选区异常？别只调 direction
原生 <input type="text"> 在 focus 时，会根据其当前内容语言自动调整内部文本方向。空值或纯英文内容下，即使父容器是 direction: rtl，光标也可能从左开始、删除键行为反直觉。
根本解法不是压样式，而是明确语义：
- 对阿拉伯语输入场景，必须写
<input dir="rtl">，而非仅靠父容器 CSS - 避免对中文/英文内容强制套
dir="rtl"—— 这会破坏双向文本算法，导致括号错位、数字顺序颠倒 - 混排内容（如阿拉伯文中嵌英文 URL）需配合
unicode-bidi: isolate，否则dir单独使用可能失效
最易被忽略的一点：direction 控制的是文本流起点和字符排列顺序，不是“镜像翻转”。强行给整站加 direction: rtl 而不处理内容语义和逻辑方位，只会让布局和交互全面失准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
