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

Question

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

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

所以，本文档中的 CSS 有一个媒体查询：

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

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

Answer 1

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

.sub-form {
  width: 570px;
}  

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

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

我敢肯定还有其他原因。