我有一个模板,可以设置全局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