CSS：同一 Class 上的多个“!important”实例

Question

对我来说，我有一个以前从未遇到过的奇怪情况。

我创建了一个 class 定义了 0.8vw
的 font-size 如果 screen-size-width 小于 750px，则加载新的 media query，其中 font-size 为 3.2vw。

因为这是相同的 class 我必须在 750px 查询上使用 !important。

问题来了....如果有，还会有另一个 media-query 我必须使用另一个 !important 但据我所知这是不可能的.

我开始觉得我没有完全理解如何结合使用 media-queries 和不同的样式。

这是一个应该如何进行的示例：

@media (max-width: 750px) {
  .header_devider{
    font-size: 3.2vw !important;
  }
}

@media (max-width: 320px) {
  .header_devider{
    font-size: 4vw !important;
  }
}

.header_devider{
    font-size: 0.8vw;
}

<div class="header_devider">
    test content
</div>

希望有人能告诉我如何解决这个问题。

男.

Answer 1

在您的初始样式声明之后声明您的媒体查询，它应该可以工作：

.header_devider {
  font-size: 0.8vw;
}

@media (max-width: 750px) {
  .header_devider {
    font-size: 3.2vw;
  }
}

@media (max-width: 320px) {
  .header_devider {
    font-size: 4vw;
  }
}