dir="ltr"可省略，因浏览器默认将视为ltr且所有子元素继承该方向；仅当需覆盖父级rtl环境（如阿拉伯语页面中嵌英文段落）时才需显式声明。
dir="ltr" 是 HTML 的默认行为，显式设置它通常只在需要覆盖父级 RTL 环境时才有意义。
为什么dir="ltr"一般不用写
浏览器默认把 当作 dir="ltr" 处理，所有子元素继承该方向。除非你已在外层（比如整页设了 dir="rtl"）改变了方向，否则加 dir="ltr" 不产生实际效果，反而可能干扰自动继承逻辑。
- 写
属于冗余操作，多数框架/模板生成的 HTML 里根本不会出现 - 在 RTL 页面中嵌一段英文段落，才需要局部显式写
<p dir="ltr">Hello world</p> -
dir="ltr"和dir="rtl"是唯二有完整语义效力的取值；dir="auto"不推荐用于结构化文本
dir="ltr" 和 style="direction: ltr" 的关键区别
CSS 的 direction: ltr 只影响文本渲染和盒模型排列，不改变底层逻辑顺序；而 HTML 的 dir="ltr" 是语义属性，会影响 Tab 键焦点流、剪贴板粘贴顺序、<input> 光标起始位置等。
- 只用 CSS：复制一段文字到记事本，顺序可能错乱；表单按 Tab 键仍从右往左跳（如果父级是 RTL）
- 只用 HTML：
能确保整个文档流回归标准逻辑，哪怕页面其他地方用了direction: rtl - 二者混用时，HTML
dir优先级更高，CSSdirection仅作用于当前元素及其后代（除非被更近的dir覆盖）
什么时候必须显式写dir="ltr"
只有在明确需要「局部覆盖 RTL 上下文」时才写，典型场景包括：
- 阿拉伯语页面中显示英文产品名：
<h1 dir="ltr">iPhone 15</h1> - RTL 表单里嵌入 LTR 邮箱输入框：
<input type="email" dir="ltr">（避免 @ 符号位置错乱） - 防止第三方组件因继承
dir="rtl"导致图标/间距错位，强制重置某容器方向
注意：<bdi></bdi> 不适用于这种场景——它只做双向隔离，不改变布局流向或焦点顺序。
动态切换时别漏掉document.documentElement.dir
JS 切换方向必须操作 document.documentElement（即 元素），而不是 或某个 <div>：
<ul>
<li>错误：<code>document.body.setAttribute('dir', 'ltr') → 表单光标、Tab 流、Flex 主轴仍按旧方向运行
document.documentElement.dir = 'ltr' → 触发全链路方向重置localStorage，并在页面加载时读取并赋值，否则刷新即失效最易被忽略的是：即使你用 CSS 把所有文字都“看起来”右对齐了，只要没动 document.documentElement.dir，底层交互逻辑就还是错的。
