不同选择器组合中的 CSS 过渡

Question

我有一个 CSS 代码，它定义了到指定属性的转换，如下所示:

button {
    background-color: #fff;
    box-shadow: none;
    transition: background-color .3s ease, box-shadow .3s ease;
}

button:hover {
    box-shadow: 0 2px 2px 6px rgba(0,0,0,.1);
    background-color: #ddd;
}

我有另一个适用于同一个元素的代码，但使用了不同的选择器:

button.active {
    color: #808080;
    transition: color .3s ease;
}

button.active:hover {
    color: #ccc;
}

因此，存在重叠，只有一个过渡有效。 是否可以组合这些 CSS 转换以使它们协同工作？

Answer 1

将它们结合起来。

button.active {
  color: #808080;
  transition: background-color .3s ease, box-shadow .3s ease, color .3s ease;
}
button.active:hover {
  color: #ccc;
}

或使用all(完全取决于您要实现的目标)。

button.active {
  color: #808080;
  transition: all .3s ease;
}
button.active:hover {
  color: #ccc;
}