导航栏颜色过渡失效主因是未声明初始颜色值或滥用transition:all；须显式设置起点终点色值、用精准属性过渡、统一用class控制状态、注意:visited/:active兼容性及深色模式插值问题。
导航栏颜色切换为什么加了 transition 还是不生效
常见原因是没给初始状态写明确的 color 或 background-color，或者过渡属性写成了 all 却没限制触发时机。CSS 过渡只对「可计算的数值型属性」起作用，而如果目标元素初始值是 inherit、transparent（某些浏览器下）、或未声明的默认值，浏览器可能无法插值，导致跳变。
- 必须显式声明初始色和悬停/激活色，比如
background-color: #fff和background-color: #007bff - 避免用
transition: all 0.3s ease，改用精准属性：transition: background-color 0.3s ease, color 0.3s ease - 如果导航项用
标签，注意:hover伪类是否被:visited干扰（已访问链接默认紫色，且部分浏览器限制其样式变更）
如何让 :hover 和 .active 都平滑过渡
不能只靠伪类，得把状态控制权交给 class，否则 :hover 和 JavaScript 切换的 .active 可能冲突或无过渡。推荐统一用 class 控制，并在基础样式里写好过渡规则。
nav a {
color: #333;
background-color: #f8f9fa;
transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease;
}
nav a:hover,
nav a.active {
color: white;
background-color: #007bff;
}
-
cubic-bezier(0.4, 0, 0.2, 1)是 MDN 推荐的「标准缓动」，比ease更自然，尤其适合背景色变化 - 确保
.active的样式声明顺序在:hover之后，或用相同特异性，避免被覆盖 - 如果用 JS 切换
.active，记得不要用style.backgroundColor = '...'写内联样式——它会覆盖 CSS 中的transition
移动端点击无过渡？可能是 :active 没触发
iOS Safari 和部分安卓浏览器对 如果用了 立即学习“前端免费学习笔记（深入）”；:active 支持不稳定，尤其在非可点击元素（如 touchstart/touchend 或启用 cursor: pointer 来激活点击状态。
cursor: pointer（哪怕不是链接），能提升 iOS 上 :active 触发率touchstart 添加临时 class，例如 is-pressing，并在 CSS 中定义该 class 的过渡样式:active 做颜色反馈，它持续时间极短（约 100ms），人眼难感知，更适合配合 transform: scale(0.98) 做微交互颜色过渡在深色模式下翻车怎么办
prefers-color-scheme 媒体查询，但过渡突然中断，大概率是因为深色/浅色两套规则里，某个颜色值是 currentcolor 或未声明的变量，导致浏览器无法在两套值之间插值。
过渡真正难的不是写那行 #000、rgb(0,0,0)、hsl(0,0%,0%)），避免 currentColor 或 CSS 自定义属性（--bg）直接用于 transition 属性中@property（Chrome 110+）注册为可动画类型：@property --nav-bg {
syntax: '再用 background-color: var(--nav-bg) 配合 transition
transition，而是确保起点、终点、触发时机、渲染上下文四者都处于浏览器可插值的状态。漏掉任意一环，都会变成“看起来写了，实际没动”。
