Làm thế nào để ghi đè lên phong cách toàn cầu cho img thẻ trong css

Question

Tôi có một mẫu mà đặt thuộc tính thẻ img toàn cầu như vậy:

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

tôi có một danh sách trên trang của mình và một trong những mục cần phải có một nhỏ hình ảnh trong suốt. Kiểu dáng ở trên làm cho hình ảnh có nền và đường viền mà tôi không muốn. Danh sách html là:

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

Tôi đã cố gắng để ghi đè lên các thẻ img với mã dưới đây, nhưng Firebug tiếp tục cho thấy những quy tắc với một "gạch" cho thấy sự phong img toàn cầu trên đang được ưu tiên. Tôi nghe điều này có thể là do các kiểu id css ghi đè lên các kiểu lớp. Làm cách nào để tôi thực hiện việc này?

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

Answer 1

Đó là bởi vì CSS sử dụng specificity khi áp dụng các phong cách (nó thác)

Nó sẽ làm việc cho bạn nếu bạn thay đổi nó để

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

Dưới đây là đặc hiệu được giải thích trong Star Wars điều khoản: 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

bạn có các tùy chọn khác nhau bạn chuyển đổi nội dung id thành nội dung lớp hoặc bạn chuyển đổi lớp trace_item thành id hoặc bạn thêm mục quan trọng vào lớp trace_item của bạn hoặc thêm #content vào .trace_item cũng hoạt động

Answer 4

Chỉ cần thêm #content vào ghi đè của bạn css selector:

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

Xem một bản demo ở đây: http://jsfiddle.net/alp82/A5rHY/6/