必须在上设dir="rtl"并配合lang="ar"，同步翻转所有方向相关css（如flex-direction: row-reverse、margin-left替代margin-right）、伪类方向属性及svg图标，否则菜单逻辑错乱。
直接在 <nav></nav> 上加 dir="rtl" 不够，必须同步镜像所有依赖方向的 CSS 属性，否则菜单项顺序、对齐、悬停效果都会错乱。
dir="rtl" 必须作用于整个导航容器
只给某个 <a></a> 或 <li> 加 dir="rtl" 会破坏继承链，导致子元素方向不一致。正确做法是把 dir="rtl" 放在最外层语义容器上：
<nav dir="rtl"><ul>
<li><a href="/home">الرئيسية</a></li>
<li><a href="/about">من نحن</a></li>
</ul></nav>
- 不能只加在
<ul></ul>或<li>上 —— 它们会继承自<nav></nav>，但若祖先没声明，浏览器可能按系统语言 fallback - 必须配合
lang="ar"（或其他 RTL 语言）使用，dir和lang缺一不可 - 若用
dir="auto"，仅适用于用户输入内容方向未知的表单场景，导航菜单必须显式设为rtl
Flex 布局下必须改 flex-direction 和 justify-content
默认 display: flex 的 row 方向是 LTR，justify-content: flex-start 会把第一个菜单项顶到最左 —— 在 RTL 下这反而变成最右，逻辑反了。
- 要让“首页”出现在右端（视觉起点），需设
flex-direction: row-reverse -
justify-content: flex-end才等效于 LTR 下的flex-start，即对齐到 RTL 的“起始侧” - 避免用
float: right—— Flex 已足够，且float在 RTL 中行为更难预测 - 示例关键 CSS：
nav ul {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
nav li {
margin-left: 20px; /* 注意：不是 margin-right！LTR 的 right 在 RTL 是 left */
}
悬停和焦点样式容易漏掉方向翻转
:hover 和 :focus 下的伪元素（比如下划线、边框、背景扩展）如果用了 left/right 值，会完全跑偏。
-
border-bottom: 2px solid #007BFF没问题，但border-right要改成border-left - 用
::after做底部横线动画时，left: 0→right: 0，width: 0→width: 100%也要反向控制 - 键盘焦点环（
outline）本身无方向性，但若用box-shadow模拟，注意inset和偏移方向是否需调整 - 务必测试 Tab 键导航顺序：RTL 菜单应从右往左依次获得焦点
响应式断点里 RTL 逻辑不能丢
媒体查询切换为垂直堆叠时，很多人只改 flex-direction: column，却忘了 column 本身无左右之分 —— 但文字对齐、图标位置、箭头方向仍需适配。
- 垂直菜单中，
text-align: right才符合阿拉伯语阅读习惯（而非left） - 若用 hamburger 图标，三横线图标本身无需翻转，但点击后展开的菜单需保持
dir="rtl"继承 - JavaScript 控制菜单显隐时，别用
element.style.left = ...这类物理定位，改用margin-inline-start或inset-inline-start - 最易忽略的一点：SVG 箭头图标（如 ▶）在 RTL 菜单中应为 ◀，否则语义冲突
RTL 导航真正的复杂点不在 HTML 结构，而在所有「方向敏感」的 CSS 和交互细节是否被系统性翻转 —— 少一个 margin-left 替换，就可能让整个菜单在阿拉伯语用户眼里显得生硬甚至不可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
