transition-delay 不生效主因是被后续更具体的 transition 简写声明覆盖，因 transition 是简写属性，后声明会重置所有子属性（含 delay）为初始值或新值；须合并书写或分开设置各子属性。
transition-delay 不生效，大概率是被覆盖了
CSS 中 transition-delay 看似简单，但实际无效时，90% 的情况不是写错了值，而是被后续更具体的 transition 声明覆盖了。浏览器只认最后解析到的那条完整 transition 声明，前面的整条都会被丢弃——包括其中的 transition-delay。
多个 transition 定义会相互覆盖，不是叠加
CSS 的 transition 是一个简写属性，只要出现一次完整声明（哪怕只写 transition: all 0.3s），就会重置所有子属性（transition-property、transition-duration、transition-timing-function、transition-delay）为初始值或你指定的值。后面再写一条 transition: opacity 0.2s，就等于把 delay 重设为 0s（初始值）。
- ❌ 错误写法（第二条覆盖第一条的 delay）：
.box {<br> transition: background-color 0.3s ease 0.5s;<br> transition: transform 0.2s ease;<br>} - ✅ 正确写法（合并成一条，显式保留 delay）：
.box {<br> transition: background-color 0.3s ease 0.5s, transform 0.2s ease 0.5s;<br>} - ⚠️ 注意：即使只改一个属性，也得把 delay 显式写上，否则就是
0s
检查是否在 :hover 或媒体查询里漏写了 delay
很多人只在默认状态写了 transition-delay，却在 :hover 里只写了 transition: opacity 0.3s，结果悬停瞬间立刻开始过渡——因为 :hover 规则覆盖了默认状态的整条 transition，delay 归零。
- 确保 hover/active 等交互状态中，如果需要延迟，必须显式带上
transition-delay值 - 或者统一用
transition-property+ 单独设置各子属性，避免简写覆盖：.box {<br> transition-property: background-color, transform;<br> transition-duration: 0.3s, 0.2s;<br> transition-timing-function: ease, ease;<br> transition-delay: 0.5s, 0.5s;<br>}<br>.box:hover {<br> background-color: #ff6b6b;<br> transform: scale(1.05);<br>}
用 DevTools 快速定位是否被覆盖
在浏览器开发者工具的 Styles 面板里，直接看元素最终计算出的 transition-delay 值。如果显示为 0s 但你写了 0.5s，说明它被某条更靠后、更具体的 transition 简写覆盖了。点击右侧小箭头展开“已计算”值，能看到哪条规则胜出。
- 重点关注同选择器下多次出现的
transition - 检查是否引入了第三方 CSS（如 Bootstrap、Tailwind）悄悄定义了
transition - 注意 CSS Modules 或 scoped style 的哈希后缀可能导致选择器权重变化，间接影响覆盖顺序
真正容易忽略的是：transition 子属性之间不独立，transition-delay 没有“继承”概念，它永远依附于最近一次完整的 transition 声明。写多条简写，等于反复重置，而不是累加配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
