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

【问题标题】：Why media queries has less priority than no media queries css为什么媒体查询的优先级低于没有媒体查询 css
【发布时间】：2015-09-14 21:17:42
【问题描述】：

我想知道为什么媒体查询的优先级低于普通 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>

【问题讨论】：

标签： html css

【解决方案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。这最终会导致!importants 到处都是，然后你仍然需要处理选择器的特殊性。

【讨论】：

【解决方案2】：

在 head 部分链接 css 文件时，只需在最后包含媒体查询的文件。这样，如果它们具有相同的特异性，它可以覆盖其他样式规则。这对我很有效。

【讨论】：