How to override global style for img tag in css

I have a template which sets global img tag properties as such:

#content img {
 开发者_开发问答   background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CFCFCF;
    margin-bottom: 2px;
    padding: 2px;
}

I have a list on my page and one of the items needs to have a small transparent image. The styling above is causing the image to get a background and borders that I do not want. The list html is:

<div id="land_items">
<ul>
<li class="trace_item">
<a href="/imglink"><img src="img/popup.png"></a>
</li>
</ul>
</div>

I have tried to override the img tag with the code below, but Firebug continues to show these rules with a "strikethrough" indicating the global img styling above is taking precedence. I hear this could be because id css styles override class styles. How do I accomplish this?

li.trace_item img {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

That's because CSS uses specificity when applying the styles (it cascades)

It should work for you if you change it to

#content li.trace_item img {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

Here's specificity explained in Star Wars terms : http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Just prepend #content to your overriding css selector:

#content li.trace_item img {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

See a demo here: http://jsfiddle.net/alp82/A5rHY/6/

#content li.trace_item img {
   background-color: transparent;
   border: none;
   padding: 0;
   margin: 0;
}

you have different options you convert the id content to a class content or you convert the trace_item class to an id or you add the !important to your trace_item class or prepend #content to .trace_item also works