Question

我有一个包含两个类的元素：

<div class="class1 class2"></div>

.class1 {transition: background-color 0.4s;}
.class2 {transition: top 1s;}

问题是class2的转换会覆盖class1的转换。

我无法使用.class2 {transition: all 1s}因为转换持续时间必须不同。

我也不想将代码从class1复制到class2，因为class2也可以应用于其他元素。

有没有办法在不覆盖现有元素的情况下向元素添加转换？

Answer 1

不幸的是，无法在CSS中的另一个规则中“扩展”某个属性，无论它是transition还是其他属性。一些替代方案可能是：

为类

的组合创建规则

.class1.class2 {transition:background-color 0.4s, top 1s;}

缺点是您必须为每个相关组合创建此类规则。这也意味着代码重复。

更改html以消除组合规则的需要

找到一种表示html对象的正确方法，这样您就不需要扩展规则了。就我而言，它是：

<div class="class2">
  <div class="class1">
</div>

缺点是html有点复杂。另一方面，您可以避免重复代码，并使您的CSS更可重用。

Answer 2

在CSS中，当有两个冲突的属性时，最后一个将始终覆盖第一个（除非你添加“！important”，在我看来有点懒）。

你想考虑重新思考CSS的流动方式。您希望元素始终具有的最重要的样式应该在第一个块中......并且后续样式应该以相加的方式应用。

Answer 3

您可以使用两个类组合的选择器，并用逗号分隔两个转换，如下所示：

.class1.class2 { 
    -webkit-transition: background-color 0.4s, top 1s; /* Safari 4.0 */
    -moz-transition: background-color 0.4s, top 1s; /* FF 5.0 */
    -o-transition: background-color 0.4s, top 1s; /* Opera 12 */
    transition: background-color 0.4s, top 1s; /* Modern browsers */
}

将转换添加到其他属性

3 个答案:

为类

更改html以消除组合规则的需要