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;
}

CSS 不同选择器组合中的转换

CSS transitions in different selectors combinations

css

transition