CSS变量不自动继承，需显式传递；子菜单脱离父容器时须手动继承；推荐用data-level配合属性选择器统一管理层级颜色；hover动画应映射到可过渡属性；注意优先级冲突、大小写敏感及语法规范。
多级菜单里子菜单颜色不继承父级？用 --menu-color 变量链式传递
CSS变量本身不自动继承，:root 定义的变量默认只在全局作用域生效，子菜单元素不会“自动拿到”父菜单设的局部变量值。必须显式把变量从父级传给子级，靠的是 var(--menu-color) 在子选择器中重新声明或覆盖。
- 父菜单设置
style="--menu-color: #2563eb;"，子菜单直接写color: var(--menu-color);就能用——前提是子元素在父元素内部且未被其他样式打断作用域 - 如果子菜单是
position: absolute移出父容器流（比如下拉弹层），它就脱离了父级作用域，此时需在弹层元素上手动继承：style="--menu-color: var(--menu-color);" - 避免在多个层级重复定义同名变量但不同值，否则调试时容易搞不清哪个生效；建议统一用
--menu-level-1-color、--menu-level-2-color这类带层级标识的命名
用 :is() 和 [data-level] 批量控制不同深度的颜色
手写 .menu > .submenu > .submenu > .item 这种选择器既难维护又无法扩展。更可靠的方式是让 HTML 标明层级，再用属性选择器 + :is() 统一匹配。
- HTML 中给每级菜单加
data-level="1"、data-level="2"，例如：<ul class="menu" data-level="1"><li><ul data-level="2">...</ul></li></ul> - CSS 写成：
[data-level="1"] { --menu-color: #1e40af; } [data-level="2"] { --menu-color: #3b82f6; } [data-level="3"] { --menu-color: #93c5fd; } - 所有菜单项统一用
color: var(--menu-color);，无需为每一级单独写颜色规则 - 注意：IE 不支持
:is()和data-*属性选择器，如需兼容，改用 BEM 类名（如.menu__item--level-2）
hover 时颜色突变不自然？用 transition 配合变量插值
CSS 变量不能直接参与 transition 动画，但可以间接实现——把变量映射到可过渡的属性上，比如 color 或 background-color。
- 错误写法：
transition: --menu-color 0.2s;（无效，变量本身不可过渡） - 正确做法：定义两个变量
--menu-fg和--menu-fg-hover，然后用color: var(--menu-fg); transition: color 0.2s;，hover 时只改--menu-fg的值 - 若要实现深色/浅色主题切换下的 hover 效果，建议把颜色逻辑抽到 JS 控制，CSS 只负责接收变量，避免在 CSS 里写大量媒体查询嵌套
子菜单展开后颜色失效？检查 !important 和 specificity 冲突
常见现象：一级菜单颜色正常，二级菜单展开后文字变成浏览器默认黑/蓝，控制台看 computed 样式发现 color 被更高优先级规则覆盖。根本原因常是框架组件自带样式或重置 CSS 干预了。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具选中失效元素，看
color属性旁是否有小箭头指向某条规则——点开看是不是来自button:focus、a:link或第三方 UI 库 - 不要滥用
!important，优先提升选择器 specificity，比如把.menu a改成.menu__item > a或加上[data-level] - 如果用了 CSS-in-JS 或 Shadow DOM，变量作用域会被隔离，
:host或::slotted内需显式透传变量
最易被忽略的一点：CSS 变量大小写敏感，--Menu-Color 和 --menu-color 是两个变量；另外，变量值里带空格或括号（比如 hsl(200, 100%, 50%)）必须完整包裹在引号外，否则解析失败，但 CSS 变量本身不支持引号语法——所以别写 --color: "blue";，直接 --color: blue; 就行。
