如何仅移除元素的background-color与color过渡效果？现有写法失效

问题原因 #

你原来的写法未生效，核心问题有两点：

• 当元素原本的transition是all或包含多个属性时，transition-property: background-color, color会覆盖原有过渡属性列表，导致其他属性的过渡也被修改，若你的需求是保留其他属性过渡，就会出现不符合预期的情况；
• 若元素的过渡规则优先级高于.notransition *（即便加了!important，也可能存在更复杂的选择器冲突），也会导致规则不生效。

正确实现方式 #

根据你的需求，分两种场景处理：

场景1：仅取消background-color和color的过渡，保留其他属性的原有过渡 #

如果元素原本使用transition: all或明确列出多个过渡属性，你需要针对性地为这两个属性设置0时长过渡，同时保留其他属性的过渡规则：

.notransition * {
  /* 先继承原有过渡规则，再覆盖指定属性的时长 */
  transition: inherit;
  /* 单独为目标属性设置0秒过渡 */
  transition: background-color 0s, color 0s;
}

若你明确知道其他需要保留过渡的属性，也可以直接列出，确保规则更严谨（假设其他属性过渡时长为0.3s，可根据实际调整）：

.notransition * {
  transition: background-color 0s, color 0s, border 0.3s, width 0.3s;
}

场景2：确保目标属性绝对无过渡（不管原有规则） #

如果你只需要确保background-color和color的变化没有过渡，无需关心其他属性，可直接指定这两个属性的过渡时长为0，并强制覆盖原有规则：

.notransition * {
  transition-property: background-color, color !important;
  transition-duration: 0s !important;
  transition-timing-function: linear !important;
}

这种写法会把元素的过渡属性限制为这两个，并设置0时长，确保它们的变化不会触发过渡。

补充说明 #

• 你之前用transition: none !important生效，是因为它直接禁用了所有属性的过渡，范围更广；
• 注意选择器优先级：如果元素有更具体的过渡规则（比如.card .btn），你可能需要调整.notransition *的选择器为更具体的形式（比如.notransition .card .btn），或确保!important能覆盖原有规则。

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