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

Question

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

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

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

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

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

score 1 · Accepted Answer

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

.sub-form {
  width: 570px;
}

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

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

我敢肯定还有其他原因。

1 回答 1