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

前端 思享 255浏览

自己博客“推荐阅读”板块在前面添加了一个小背景图的样式,仿造的是原主题“与本文相关的文章”。同时也想让样式在移动端也保持一致,即使用媒体查询@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也应该注意一下

推荐阅读

右侧固定宽度,左侧自适应两栏布局

最近修改了一个主题。原始主题的左侧是侧边栏,右侧是内容体。在代码中,侧栏代码放在主要内容之前。我的习惯是主要内容在左边,主要内容在前面,侧边栏在右边。于是我在网上搜了一下,找到了两种实现方式。一般来说,一种方法是使用cal()。我用的是这个,第二个是......

css3怎么实现文字闪烁效果

如果不需要渐变闪烁效果,我们可以在关键帧动画中定义50%和50.1%的不透明度值。...

纯css实现轮播和点击切换效果(无JS)

接下来,根据需要设置ul的长度。这里,首先制作三个切换窗口,因此ul的宽度被设置为容器宽度的300%,li是每次切换时显示的子元素,宽度被设置为所显示容器的100%。所有多余的部分都被隐藏起来,这样我们就可以通过修改ul的margin-left属性的......