25

我从 Chrome ADB 插件中得到这个，通过 USB 连接到我的手机。基本上允许我检查我的 android chrome 上的元素并在我连接的 PC 上查看或更改它们。

我遇到了这个奇怪的问题。我认为媒体查询是为了推翻通用类规则，但如果你看到这张图片，你可以看到媒体查询规则被覆盖了。我可以通过添加来解决这个问题，!important但我不想这样做，我也意识到非媒体查询容器 h1 的规则是在媒体查询规则之后声明的。我不确定这是否是原因，或者是否还有其他原因。谁能解释为什么会这样？

在此处输入图像描述

CSS 代码：

@media screen and (max-device-width: 767px) {
  .container > h1 {
    font-size: 40px;
    line-height: 40px; }
    ...some more rules... }
.container > h1 {
    margin: 0;
    font-size: 80px;
    font-weight: 300;
    line-height: 80px; }

编辑 - 添加示例

请参阅：http: //jsfiddle.net/djuKS/ 请注意，如果您交换规则顺序，则行为符合预期。但默认情况下，媒体查询被覆盖

4

1 回答 1

32

我认为媒体查询要推翻通用类规则，

MQ 中的规则在选择器的优先级方面与任何其他规则一样，只是它们仅根据 at-media 的条件应用。

(...) 我也意识到非媒体查询容器 h1 的规则是在媒体查询规则之后声明的。

您找到了正确的原因：两个规则具有完全相同的优先级（特异性），因为它们具有完全相同的选择器。如果一个属性是两个规则的一部分（并且声明是有效的并且它们都或都没有!important修饰符），那么最后写入的声明的值将适用。
这就是你总是会发现 MQ 写在最后的原因（除了通过条件类应用于 IE8- 的规则，MQ 和现代浏览器和 IE8- 之间不可能重叠:)）

于 2013-08-23T06:11:59.003 回答