html - 为什么媒体查询的优先级低于无媒体查询 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%;
  }
}

这样一来，媒体查询就晚了，当媒体查询与视口(viewport)大小匹配时，将覆盖之前的规则。

---

如果出于某种原因这不是一个选项，您将需要增加您想要赢得的规则的选择器特异性。将其更改为以下内容即可:

@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，然后您仍然需要处理选择器的特殊性。