默认CSS覆盖媒体查询

前端之家收集整理的这篇文章主要介绍了默认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.f2er.com/css/219205.html

猜你在找的CSS相关文章