如何为CSS不同选择器设置不同过渡时长？实现按钮hover与active过渡差异化

完全可以实现，核心是在不同的状态选择器中单独定义transition属性，覆盖基类的默认过渡配置。

你的原代码把统一的过渡规则写在了.form__submit基类里，导致hover和active状态的过渡时长一致。要实现差异化，只需在hover和active状态中分别指定不同的过渡时长即可，甚至可以精准指定参与过渡的属性（比用all更节省性能）。

修改后的代码示例：

.form__submit {
  background-color: #f06449;
  border: 2px solid #f06449;
  color: white;
  font-weight: bold;
  width: 100%;
  max-width: 240px;
  padding: 12px 24px;
  font-size: 20px;
  /* 基类保留默认过渡，也可留空由状态类完全控制 */
  transition: all 300ms ease;
}

.form__submit:hover {
  border-color: white;     
  background-color: transparent;
  /* hover状态使用300ms过渡 */
  transition: background-color 300ms ease, border-color 300ms ease;
}

.form__submit:active {
  border-color: #f06449;
  color: #f06449;
  /* active状态使用更长的800ms过渡 */
  transition: border-color 800ms ease, color 800ms ease;
}

原理说明： #

当元素进入hover状态时，会应用hover选择器内的transition规则，此时过渡时长为300ms；触发active状态时，active选择器的transition会覆盖之前的配置，使用800ms的过渡时长。另外，明确指定过渡属性（如background-color、border-color）而非用all，能避免不必要的属性参与过渡，提升页面性能。

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