div内span元素hover时letter-spacing不生效问题排查

CSS动画的计算样式优先级高于普通伪类样式——如果你的changeColor或borderOnLoad动画里，哪怕是默认值normal的letter-spacing声明，动画运行时都会持续覆盖:hover中设置的letter-spacing，直接导致hover效果失效。

• 清理动画关键帧里的冗余属性
  打开你的@keyframes代码，删掉所有和letter-spacing相关的声明，让hover样式能正常覆盖：

  /* 修正前的错误示例 */
  @keyframes changeColor {
    0% { color: red; letter-spacing: normal; }
    100% { color: blue; letter-spacing: normal; }
  }
  
  /* 修正后：移除无关的letter-spacing */
  @keyframes changeColor {
    0% { color: red; }
    100% { color: blue; }
  }
  

• 应急方案：用!important强制提升优先级
  要是没法改动画代码，可在hover的letter-spacing后加!important，强制覆盖动画的计算值：

  div:hover span {
    letter-spacing: 5px !important;
  }
  

  注意：!important会打乱CSS优先级规则，能不用就不用，优先选第一种方法。

• 限制动画作用范围
  检查borderOnLoad动画是否作用在div上却意外继承给了span；如果changeColor必须作用于span，只保留需要动画的属性（比如color），别碰letter-spacing。

• 调整动画填充模式
  要是动画结束后还在保留样式状态，把animation-fill-mode设为none，让元素回到初始样式，hover就能生效：

  span {
    animation: changeColor 2s ease;
    animation-fill-mode: none; /* 替换forwards，动画结束后还原初始样式 */
  }
  

内容的提问来源于stack exchange，提问作者Mathew