如何在多值 css 转换上设置 !important？

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;

它坏了，不能用。

有没有机会我们可以对多值 transform 使用 !important？

Answer 1

不要使用!important

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

像这样：

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

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

如果您的 !important 规则不起作用是因为 CSS specificity and/or CSS inheritance

如何在多值 css 转换上设置 !important？

how to set !important on a multi value css transform?

html

css

css-transforms