Cómo anular estilo global para la etiqueta img en css

Question

tengo una plantilla que establece las propiedades globales etiqueta IMG como tal:

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

Tengo una lista en mi página y uno de los elementos tiene que tener una pequeña imagen transparente. El estilo anterior hace que la imagen tenga un fondo y bordes que no quiero. La lista es html:

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

he tratado de anular la etiqueta img con el código de abajo, pero Firebug sigue mostrando estas normas con un "tachado" que indican el estilo img global superior está tomando precedencia. Escuché que esto podría deberse a que los estilos id CSS anulan los estilos de clase. ¿Cómo logro esto?

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

Answer 1

Eso es porque CSS utiliza specificity al aplicar los estilos (que cae en cascada)

Se debe trabajar para usted si lo cambia a

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

Aquí está explicado especificidad en Star Wars términos: 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

tiene diferentes opciones a convertir el contenido de identificación por un contenido de clase o convertir la clase trace_item a un id o se agrega el! Importante para su clase o trace_item #content anteponer a .trace_item también trabaja

Answer 4

#content simplemente escriba a su primordial selector CSS:

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

ver una demostración aquí: http://jsfiddle.net/alp82/A5rHY/6/