为什么媒体查询的优先级低于没有媒体查询的css

Question

我想知道为什么媒体查询的优先级低于普通的CSS？ 如何解决媒体查询更重要的问题？

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
     width: 120%;
  }

}
.logo img{
    width: 100%;
}

<div class="logo">
  <a href="/#!/"><img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" alt="image"></a>
</div>

Answer 1

这与CSS中Cascade的工作方式有关。当两个冲突的规则针对同一个元素时，浏览器会使用级联规则来确定要应用的规则。

Selector specificity是其中最重要的部分：具有更具体选择器的样式将覆盖具有较少特定选择器的样式......但是 媒体查询不会改变选择器的特异性。这意味着您的两个选择器具有相同的特异性。当发生这种情况时，样式表中稍后出现的那个将覆盖之前的那个。

您最简单，最好的解决方法是交换规则集的顺序：

.logo img{
    width: 100%;
}

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
     width: 120%;
  }
}

这样，媒体查询会在稍后出现，并在媒体查询与视口大小匹配时覆盖之前的规则。

如果由于某种原因这不是一个选项，您将需要增加您想要获胜的规则的选择器特异性。将其更改为以下内容将起作用：

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
     width: 120%;
  }

}
.logo a img{
    width: 100%;
}

这样选择器现在有两个标签和一个类，或者[0,1,2]，使它比一个标签和一个类更具体，或者[0,1,1]（每个标签中的零）表示没有具有高度特异性的ID。

不使用!important来修复此类特殊问题。如果您需要在其他地方再次覆盖该样式，唯一的方法是添加另一个!important。这最终将导致!important到处，然后您仍然需要处理选择器的特异性。

Answer 2

在开头部分链接css文件时，只需在文件末尾包含媒体查询即可。这样，如果它们具有相同的特异性，则可以覆盖其他样式规则。 这对我来说很好。

Answer 3

将!important标记添加到您想要更重要的媒体查询中的css。

我认为媒体查询优先级低于普通css背后的原因是媒体查询的目的是覆盖比直接样式更多的元素。

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
     width: 120% !important;
  }

}
.logo img{
    width: 100%;
}