nasıl css etiketi img küresel stilini geçersiz kılmak için

Question

ben gibi küresel img etiketi özelliklerini belirleyen bir şablon var:

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

Sayfamda bir liste var ve öğelerden biri küçük olması gerekir şeffaf görüntü Yukarıdaki stil, resmin, istemediğim bir arka plan ve kenarlıklar elde etmesine neden oluyor. Aşağıda koduyla img etiketi geçersiz kılmak için çalıştık

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

ama Kundakçı yukarıda küresel img stil belirten bir "strikethrough" geçersiz kılan bu kuralları göstermeye devam: Liste html 'dir. Bunun nedeni, css stillerinin sınıf stillerini geçersiz kılabileceğini duydum. Bunu nasıl başarabilirim? Eğer

İşte

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

değiştirirseniz sizin için çalışması gerektiğini

stilleri (o çağlayan) uygularken CSS specificity kullandığından var

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

Answer 1

özgüllük Star Wars anlatılmış Koşullar: 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

Farklı seçenekleriniz var Bir sınıf içeriğine id içeriği dönüştürmek veya bir id trace_item sınıfını dönüştürmek veya Eklemek! Önemli sizin trace_item sınıfına veya başa #content için .trace_item için ayrıca Burada üste için

Answer 4

Sadece başa getirebilir #content işleri css seçici: Star Wars referans için http://jsfiddle.net/alp82/A5rHY/6/