direction 属性看似不生效实为被祖先元素继承覆盖，需检查 computed styles 中的 origin；RTL 下应使用逻辑方位属性如 margin-inline-start 而非 margin-left；input 方向优先用 HTML 的 dir 属性控制；Flex/Grid 布局中 start 指 inline-start 而非物理左，避免滥用 row-reverse。
direction 属性不生效？检查父容器是否覆盖了文本方向
很多情况下 direction 看似没起作用，其实不是它失效，而是被祖先元素的 direction 或 dir 属性“继承覆盖”了。CSS 的 direction 是可继承属性，一旦父级设为 rtl，子元素即使显式写 direction: ltr 也会按规则重新计算文本流——但某些内联元素（比如 span 包裹的阿拉伯文字）可能仍沿用父级逻辑顺序。
实操建议：
- 用浏览器开发者工具逐层检查 computed styles 中
direction的来源，重点看origin是inherited还是specified - 对需要强制独立方向的容器，加
direction: ltr !important（仅限调试或兜底，生产环境慎用） - 比纯 CSS 更可靠的方式是直接在 HTML 标签上加
dir="ltr"或dir="rtl"，它优先级高于样式表中的direction
RTL 布局中 margin/padding 左右颠倒了吗？别依赖 left/right
CSS 的 margin-left 和 margin-right 在 RTL 下不会自动翻转；它们始终按物理方向生效。真正会随 direction 或 writing-mode 变化的，是逻辑方位属性：如 margin-inline-start、padding-inline-end。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 在
direction: rtl容器里用margin-right: 10px想“往右推”，结果文字反而贴到右边边缘（因为物理右变成了视觉左） - 组件库未适配逻辑方位，导致 RTL 下按钮间距错乱、图标位置偏移
实操建议：
- 新项目优先使用
margin-inline-start/margin-inline-end替代margin-left/margin-right - 已有代码改造时，可用 PostCSS 插件（如
postcss-logical）自动转换，但注意它不处理 JS 动态插入的 style 字符串 - IE 不支持逻辑方位属性，如需兼容，得靠 JS 检测
document.dir后动态切 class
input[type="text"] 在 RTL 下光标和选区行为异常？focus 时 direction 会重置
原生 input 和 textarea 在获得焦点时，浏览器会根据其内容语言自动调整内部文本方向。如果输入框内容为空或全是英文，即使父容器设了 direction: rtl，光标也可能从左边开始，回车换行方向也不对。
使用场景：
- 多语言表单，用户切换语言后需保持输入框方向一致
- 阿拉伯/希伯来语输入场景下，数字与文字混排时光标跳转混乱
实操建议：
- 给 input 显式设置
dir="auto"（让浏览器按首字符判断）或dir="rtl"（强制） - 避免只靠 CSS
direction控制 input 方向，HTMLdir属性对表单控件更直接有效 - 若用 JS 动态设置 value，记得同步调用
input.setAttribute('dir', 'rtl')，否则 focus 后方向可能回退
Flex/Grid 布局在 RTL 下顺序翻转了吗？justify-content: flex-start 不等于左对齐
justify-content: flex-start 在 RTL 容器中实际对齐到**容器的 inline-start 边缘**，也就是视觉上的右边——这常被误认为“没翻转”，其实是翻转了但没意识到逻辑起点已变。
性能 / 兼容性影响：
- 用
flex-direction: row-reverse强制翻转是常见 hack，但它会改变 DOM 顺序语义，影响屏幕阅读器和 tabindex 流程 - Grid 的
justify-items: start行为同理，start 指的是 inline-start，不是物理 left
实操建议：
- 布局层面统一用逻辑值：
justify-content: start、align-items: end，而非flex-start这类旧别名 - 不要为了“看起来对”而滥用
row-reverse，它会让键盘导航、打印样式、截图顺序全乱 - 测试 RTL 布局时，务必打开系统级屏幕阅读器（如 NVDA + Firefox），验证焦点顺序是否符合阅读习惯
真正麻烦的不是 direction 本身，而是它和 HTML dir、writing-mode、表单行为、无障碍语义之间那几处隐性耦合——改一处，得连带查三处。
