Jak zastąpić globalny styl img tag w css

Question

Mam szablon, który określa globalne właściwości znacznika img jako takie:

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

Mam listę na mojej stronie i jeden z elementów musi mieć mały przejrzysty obraz. Powyższy styl powoduje, że obraz ma tło i granice, których nie chcę. Lista html jest:

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

Próbowałem zastąpić tag img z poniższym kodzie, ale Firebug nadal wykazują te zasady z „przekreślenie” wskazujące na globalne img stylizacji powyżej bierze pierwszeństwo. Słyszałem, że może to być spowodowane tym, że style id css nadpisują style klas. Jak to zrobić?

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

Answer 1

To dlatego CSS wykorzystuje specificity przy stosowaniu Styl (kaskady IT)

powinno działać dla Ciebie, jeśli go zmienić na

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

Tutaj jest specyfika wyjaśnione w Star Wars warunki: 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

masz różne opcje przekonwertować zawartość identyfikatora zawartości klasy lub konwertowanie klasę trace_item do identyfikatora lub dodasz! Ważny do klasy trace_item lub poprzedzić #content do .trace_item działa również

Answer 4

prostu poprzedź #content do nadrzędnego selektor CSS:

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

Zobacz demo tutaj: http://jsfiddle.net/alp82/A5rHY/6/