Question

我想撤消应用于元素的旧css transform并设置新规则。在css中，我们经常在这种情况下使用!important来覆盖优先级较高的规则，但看起来!important对转换属性没有生效：

.mk-flipbox-front {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

我想将其覆盖为：

.mk-flipbox-front {
  -webkit-transform: translateX(100%) rotateY(0deg);
  transform: translateX(100%) rotateY(0deg);
}

但是当我像这样使用!important时：

transform: translateX(100%) rotateY(0deg) !important;

它打破了，不起作用。

我们是否有机会在多值!important上使用transform？

Answer 1

请勿使用!important

相反更具体，并使用父选择器（甚至是兄弟选择器）来覆盖它

类似的东西：

＆＃13;

.mk-flipbox-front {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
.parent .mk-flipbox-front {
  -webkit-transform: translateX(100%) rotateY(0deg);
  transform: translateX(100%) rotateY(0deg);
}

＆＃13;

<div class="parent">
  <div class="mk-flipbox-front">test</div>
</div>

＆＃13;

如果!important规则不起作用的原因是CSS specificity和/或 CSS inheritance

如何设置！重要的多值css转换？

1 个答案: