如何利用CSS变量实现多级导航菜单的层级缩进？

必须用CSS变量+calc()重写缩进逻辑，因Element UI硬编码padding-left导致层级失控；应通过.el-menu--inline嵌套深度匹配层级并用margin-inline-start支持RTL。

为什么直接覆盖 padding-left 总是不生效

Element UI 的 .el-menu--inline .el-menu-item 默认带高优先级规则：padding-left: 48px，它嵌套在 .el-menu .el-menu--inline .el-menu-item 这类多层选择器里。你写 .el-menu-item { padding-left: 32px } 不仅会被覆盖，还只影响最外层项——二级、三级项压根不匹配这个选择器。

更关键的是：它的缩进不是线性叠加（二级 ≠ 20px × 2），而是混入了图标预留空间等硬编码逻辑。靠“试数值” patch，改一级就崩三层，RTL 和主题切换完全不可控。

• DOM 中子菜单容器带 .el-menu--inline，但内部项不自动携带“层级语义”
• 浏览器按选择器特异性（specificity）决定谁赢，不是“后写的一定生效”
• 单纯增加 !important 治标不治本，后续维护和主题覆盖会越来越难

用 :root 变量 + 嵌套 class 精确绑定层级

核心是切断对 DOM 深度的隐式依赖，显式用 class 表达“这是第几级”。推荐给最外层 <el-menu> 加一个稳定 class（如 menu-root），再逐级匹配：

在 :root 定义基准：:root { --indent-step: 16px; }（可被主题系统覆盖）

立即学习“前端免费学习笔记（深入）”；

• 一级项（含顶级 .el-submenu__title）：.menu-root .el-menu-item, .menu-root .el-submenu__title { padding-left: calc(var(--indent-step) * 0); }
• 二级项：.menu-root .el-menu--inline .el-menu-item, .menu-root .el-menu--inline .el-submenu__title { padding-left: calc(var(--indent-step) * 1); }
• 三级项：.menu-root .el-menu--inline .el-menu--inline .el-menu-item, .menu-root .el-menu--inline .el-menu--inline .el-submenu__title { padding-left: calc(var(--indent-step) * 2); }

这样每级缩进 = 16px × (层级 − 1)，干净、可预测、可主题化。

为什么必须用 margin-inline-start 而不是 padding-left

如果你的项目要支持阿拉伯语、希伯来语等 RTL 场景，padding-left 会让子菜单顶到右边，整个结构错乱；而 margin-inline-start 自动适配书写方向：LTR 下等效 margin-left，RTL 下等效 margin-right，同一套 CSS 在两种语言下都缩进在内容起始侧。

• 兼容性已足够：Chrome 69+、Firefox 63+、Safari 12.1+ 全部原生支持
• 别用 margin-left —— 它在 flex/grid 容器里容易被截断或忽略
• 搭配 text-align: start 更自然，避免文字对齐方向和缩进方向打架

attr(data-level) 在 calc() 里基本不能用

很多人想用 calc(var(--indent-step) * attr(data-level number, 1)) 实现自动计算，但实际中：Chrome 115+ 才开始实验性支持，Safari 完全不识别，Firefox 表现也不稳定。这不是写法问题，是浏览器实现缺失。

• 不要依赖 JS 注入 data-level —— DOM 变动、SSR、服务端渲染都可能让属性丢失或错位
• 若菜单层级固定 ≤4 级，直接写 .menu-item--level-2、.menu-item--level-3 更轻量可靠
• 用 :nth-child 或嵌套 class 推导层级，比 attr() 安全得多

真正麻烦的从来不是“怎么写第一级”，而是“改完之后第三级突然不对劲，且找不到哪条规则在干扰”。变量 + 显式层级 class 是目前唯一能长期扛住主题切换、RTL 支持、组件库升级三重压力的写法。