@media与css先后顺序产生的优先级问题

缘起：我新到一个公司，接手一个以前的项目。在谷歌模拟器上调试苹果系列的效果，总是调节不好。

 

期间：困扰了我好大一会儿，不和常规呀，难道是鬼打墙了？

 

真相：@media screen and (max-width: 800px) {}的样式应该放到后面，不应该放到没有@media的前面。

 

原因：很简单。@media是对条件才查询，但是它也遵守css的优先级顺序。

@media screen and (max-width: 800px) {
    p {
        background-color:lightblue;
        font-size: 24px;
    }
}
p {
    background-color:lightgreen;
    font-size: 48px;
}

这样的样式，即使满足了，查询条件，标签p里的文字还是48px。后面的样式会覆盖之前的。

所以正确的写法应该是：

p {
    background-color:lightgreen;
    font-size: 48px;
}

@media screen and (max-width: 800px) {
    p {
        background-color:lightblue;
        font-size: 24px;
    }
}

在回到项目中，由于之前的人，把@media写在了上面，所以导致@media里的样式怎么也不起作用。因为被后来的覆盖了。