Come ignorare lo stile globale per img tag nel css

Question

Ho un modello che definisce proprietà globali tag IMG in quanto tale:

#content img { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border: 1px solid #CFCFCF; 
    margin-bottom: 2px; 
    padding: 2px; 
} 

ho una lista sulla mia pagina e uno degli elementi ha bisogno di avere un piccolo immagine trasparente. Lo stile sopra riportato fa sì che l'immagine abbia uno sfondo e bordi che non voglio. La lista html è:

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

Ho cercato di ignorare il tag img con il codice qui sotto, ma Firebug continua a mostrare queste regole con un "barrato" che indica lo stile img globale sopra sta prendendo la precedenza. Ho sentito che potrebbe essere dovuto al fatto che gli stili id ​​css prevalgono sugli stili di classe. Come posso realizzare questo?

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

Answer 1

Questo perché CSS utilizza specificity quando si applicano gli stili (IT cascate)

dovrebbe funzionare per voi se si cambia a

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

Ecco specificità spiegato in Star Wars termini: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Answer 2

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

Answer 3

hai diverse opzioni si converte il contenuto id ad un contenuto di classe o di convertire la classe trace_item ad un id o si aggiunge l'! Importante per la vostra classe trace_item o prepend #content per .trace_item funziona anche

Answer 4

#content Basta anteporre al tuo prioritario selettore CSS:

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

vedere una demo qui: http://jsfiddle.net/alp82/A5rHY/6/