@media先后顺序错误导致效果被覆盖

自己博客“推荐阅读”板块在前面添加了一个小背景图的样式，仿造的是原主题“与本文相关的文章”。同时也想让样式在移动端也保持一致，即使用媒体查询@media设置样式。但是却一直没有生效。一起来看看是怎么回事吧

原因

@media是对条件才查询，但是它也遵守css的优先级顺序。

@media (max-width: 480px)
.relates-preview a {
    background: none;
    padding-left: 0;
}
.relates a {
    margin-right: 20px;
    background: url(data:image/gif;base64,R0lGODlhDQAFAKIAAKOjo6GhoampqYSEhJWVlZ2dnZmZmXx8fCH5BAAAAAAALAAAAAANAAUAAAMVKLfcB6PIScsZJuttLvlgSByK4wQJADs=) no-repeat 2px 9px;
    padding-left: 24px;
}

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

所以正确的写法应该是：

.relates a {
    margin-right: 20px;
    background: url(data:image/gif;base64,R0lGODlhDQAFAKIAAKOjo6GhoampqYSEhJWVlZ2dnZmZmXx8fCH5BAAAAAAALAAAAAANAAUAAAMVKLfcB6PIScsZJuttLvlgSByK4wQJADs=) no-repeat 2px 9px;
    padding-left: 24px;
}
@media (max-width: 480px)
.relates-preview a {
    background: none;
    padding-left: 0;
}

最后，问题解决，以后修改css也应该注意一下