CSS：同一类上的多个`！important`实例

Question

对我而言，我有一个以前从未遇到的奇怪情况。

我创建了class来定义font-size 0.8vw的{​​{1}} 如果屏幕尺寸宽度小于750像素，则在media query为font-size的位置加载新的3.2vw。

因为这是同一个类，我必须在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;
  }
}