除非使用“！important”，否则不会应用声明

Question

我有一个要在iframe中显示的文档。它需要在我的网站上以2个不同大小的iframe显示，我想相应地调整内容。

在框架文档中，我有一个570px宽的div。如果iframe的宽度小于400px，我希望这个div的宽度为285px。

因此，本文档中的CSS有一个媒体查询：

@media screen and (max-width: 400px) {
.sub-form {
    width: 285px !important;
   }
}

但它只有在我包含“！important”时才有效。这是为什么？

Answer 1

您需要包含的两个可能原因是：重要的是：

.sub-form {
  width: 570px;
}  

稍后出现在您的CSS文件中，或者更宽的宽度出现在更早但具有更高的特异性，即

.some-div .sub-form {
  width: 570px;
}  

我确信还有其他原因。