如何在css中覆盖img标记的全局样式

前端之家收集整理的这篇文章主要介绍了如何在css中覆盖img标记的全局样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个模板,可以设置全局img标签属性
  1. #content img {
  2. background: none repeat scroll 0 0 #FFFFFF;
  3. border: 1px solid #CFCFCF;
  4. margin-bottom: 2px;
  5. padding: 2px;
  6. }

我的页面上有一个列表,其中一个项目需要有一个小的透明图像.上面的样式使图像得到我不想要的背景和边框.列表html是:

  1. <div id="land_items">
  2. <ul>
  3. <li class="trace_item">
  4. <a href="/imglink"><img src="img/popup.png"></a>
  5. </li>
  6. </ul>
  7. </div>

我试图用下面的代码覆盖img标签,但Firebug继续用“删除线”显示这些规则,表明上面的全局img样式优先.我听说这可能是因为id css样式覆盖了类样式.我该如何做到这一点?

  1. li.trace_item img {
  2. background-color: transparent;
  3. border: none;
  4. padding: 0;
  5. margin: 0;
  6. }

解决方法

这是因为CSS在应用样式时使用 specificity(它级联)

如果你改成它,它应该适合你

  1. #content li.trace_item img {
  2. background-color: transparent;
  3. border: none;
  4. padding: 0;
  5. margin: 0;
  6. }

这里的特殊性在星球大战术语中解释:http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

猜你在找的CSS相关文章