媒體查詢@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里的樣式怎么也不起作用。因為被后來的覆蓋了。
來源：https://www.cnblogs.com/noseebye/p/5724587.html