默认CSS覆盖媒体查询

Question

我从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/ 请注意,如果您交换规则顺序,则行为符合预期.但默认情况下,媒体查询被覆盖

Answer 1

我认为媒体查询要否决泛型类规则,

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

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

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