默认CSS覆盖媒体查询 [英] Default CSS overriding media query

问题描述

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

我得到这个奇怪的问题。我认为媒体查询是推翻通用类规则，但如果你看到这个图像，你可以看到媒体查询规则被覆盖。我可以通过添加！重要解决这个问题，但我宁愿没有，我也意识到，对于非媒体质疑容器H1的规则声明的媒体查询规则后。我不知道这是为什么，或者如果有另一个原因。谁能解释为什么会发生这种情况？

CSS代码：

  @media 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; } 
  

EDIT - 添加示例

这样的： http://jsfiddle.net/djuKS/
的注意，如果你交换规则顺序，行为是预期的。但是默认情况下，媒体查询被重写的

解决方案

我觉得媒体查询是以覆盖通用类规则，

MQ中的规则就像其他选择器的优先级规则一样，

（...）我还意识到，对于非媒体类型的规则， 。查询
容器H1声明的媒体查询规则后

您找到正确的理由：这两个规则有相同的优先级（特异性），因为它们具有完全相同的选择器。如果属性是两个规则的一部分（并且声明是有效的，且两者都有效，或者没有一个具有！important 修饰符），那么 last

这就是为什么你总是会在末尾找到MQ（除了适用于IE8的规则，通过条件类，MQ和现代浏览器和IE8之间没有可能的重叠） - :)）

I'm getting this from Chrome ADB plugin, connecting to my phone via USB. Basically allowing me to inspect elements on my android chrome and view or alter them on my connected PC.

I am getting this strange issue. I thought media queries were to overrule generic class rules, but if you see this image you can see that the media query rules are being overridden. I COULD fix this by adding !important but I would rather not, I also realize that the rule for non-media-queried container h1 is declared AFTER the media query rule. I am not sure if that is why, or if there is another reason. Can anyone explain why this is happening?

CSS code:

@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; }

EDIT - Added Example

See this: http://jsfiddle.net/djuKS/ Notice if you swap the rule order, the behaviour is as expected. But by default the media query is being overridden

解决方案

I thought media queries were to overrule generic class rules,

Rules inside a MQ are rules like any other one in terms of priority of their selector, except they will only apply depending on the conditions of the at-media.

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

You found the correct reason: both rules have exactly the same priority (specificity) as they have the exact same selector. If a property is part of both rules (and the declaration is valid and both of them or none of them has !important modifier), then the value of the last declaration written will apply.
That's the reason you'll always find MQ written at the end (except rules applying to IE8- via conditional classes, no possible overlap between MQ and modern browsers and IE8- :) )

这篇关于默认CSS覆盖媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！