我有一个模板,可以设置全局img标签属性：
#content img {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CFCFCF;
margin-bottom: 2px;
padding: 2px;
}
我的页面上有一个列表,其中一个项目需要有一个小的透明图像.上面的样式使图像得到我不想要的背景和边框.列表html是：
<div id="land_items"> <ul> <li class="trace_item"> <a href="/imglink"><img src="img/popup.png"></a> </li> </ul> </div>
我试图用下面的代码覆盖img标签,但Firebug继续用“删除线”显示这些规则,表明上面的全局img样式优先.我听说这可能是因为id css样式覆盖了类样式.我该如何做到这一点？
li.trace_item img {
background-color: transparent;
border: none;
padding: 0;
margin: 0;
}
解决方法
这是因为CSS在应用样式时使用
specificity(它级联)
如果你改成它,它应该适合你
#content li.trace_item img {
background-color: transparent;
border: none;
padding: 0;
margin: 0;
}
这里的特殊性在星球大战术语中解释：http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
