默认CSS覆盖媒体查询

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

我遇到这个奇怪的问题。我认为媒体查询是推翻通用类规则，但如果您看到此映像，您可以看到媒体查询规则被覆盖。我可以通过添加！重要的修复这个，但我宁愿不知道，我也意识到非媒体查询容器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/
注意如果交换规则顺序，行为是按预期的。但默认情况下，媒体查询被覆盖

解决方法

I thought media queries were to overrule generic class rules,

MQ内的规则是与选择器的优先级相同的规则，除了它们将仅适用于根据媒体的条件。

(…) I also realize that the rule for non-media-queried
container h1 is declared AFTER the media query rule.

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

原文地址：https://www.jb51.cc/css/219205.html