应优先用子选择器（>）而非后代选择器（空格），避免深层嵌套导致的样式污染；过长链式选择器建议改用语义类名，配合css自定义属性实现主题色统一管理。
导航结构嵌套深时，用后代选择器还是子选择器？
层级越深，越容易误用 （空格）导致样式污染。比如 .nav a 会匹配所有子孙 a，包括下拉菜单里的二级、三级链接，结果改个颜色全乱了。
实际该用 .nav > ul > li > a 这类子选择器链，明确限定只作用于直接子级。但注意：过长的链会影响可维护性，超过 4 层建议加语义类名，比如 .nav-main-link、.nav-sub-link。
- 浏览器解析选择器是从右往左的，
.nav > ul > li > a比.nav a略慢，但现代浏览器几乎无感 - IE8 不支持
>，如果还要兼容，得退回到类名驱动（如.nav-link-primary） - 用
:is()可简化重复声明，例如.nav :is(.level-1, .level-2) a，但 Safari 15.4+ 才稳定支持
多级菜单中 hover 颜色不继承或错位？
常见现象是鼠标移到二级菜单项上，一级菜单文字变色了，或者 hover 效果“粘”在旧位置。根本原因是 :hover 绑定在父容器（如 li），而子菜单 ul 是绝对定位、脱离文档流，导致父 li 的 hover 区域没覆盖到子菜单区域。
解决办法不是强行扩大 li 高度，而是把 hover 触发点上移一层——绑定在包含整个菜单树的最外层容器上，比如 .nav 或 .nav-item。
- 写成
.nav-item:hover .nav-submenu+.nav-item:hover .nav-submenu a，确保子菜单显示和子项变色同步 - 避免用
transition: color .2s单独过渡文字色，要加上background-color和border-color（如果有），否则视觉跳变明显 - 移动端慎用
:hover，iOS Safari 在点击后会残留 hover 状态，建议用@media (hover: hover)做条件包裹
主题色切换时，导航各层级颜色怎么批量更新？
硬编码多个 color: #3a86ff 在不同选择器里，换主题就得全局搜替换，极易漏。CSS 自定义属性才是解法，但要注意作用域和继承边界。
推荐把颜色变量定义在 :root，再按层级覆盖：一级用 --nav-primary-color，二级用 --nav-secondary-color，并在对应选择器里用 color: var(--nav-primary-color)。
- 不要在
.nav-submenu a里直接写var(--primary-color)，而应设新变量--nav-sub-color: var(--primary-color)，方便独立调整 - 变量名带层级前缀（如
--nav-level1-text）比用注释更可靠，编辑器能自动补全、查找也准 - 如果用 CSS-in-JS 或构建工具，变量可从 JSON 主题配置注入，但纯 CSS 场景下，务必测试变量 fallback，比如
color: var(--nav-level2-text, #666)
使用 currentColor 简化配色逻辑是否安全？
它确实能省掉一堆重复 color 声明，比如让图标、边框、文字共用父元素文字色。但在复杂导航里，容易失控——某处 color: red 一改，所有子级图标、伪元素都跟着变红，连带破坏设计系统。
适用场景很窄：仅当整块导航（含图标、下划线、箭头）必须严格跟随文字主色时才用。其他情况，宁可多写一行 color: var(--nav-icon-color)。
-
currentColor不继承opacity，如果父元素设了opacity: .7，子元素用currentColor也会变灰，但你可能只想文字半透明，图标保持实色 - 伪元素
::before用currentColor很方便，但若需单独控制其亮度，就得换回具体值或 HSL 函数 - 和
inherit不同，currentColor总是取当前元素的color计算值，哪怕这个元素本身没显式设color，也会向上找最近的计算值，调试时容易绕晕
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
