默认CSS覆盖媒体查询

Question

我从Chrome ADB插件中获取此功能，通过USB连接到手机。基本上允许我检查我的机器人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/ 请注意，如果您交换规则顺序，则行为符合预期。但默认情况下，媒体查询被覆盖

Answer 1

  

我认为媒体查询会否决泛型类规则，

MQ中的规则是与其选择器的优先级相同的规则，除非它们仅适用于取决于媒体的条件。

  

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

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