Как переопределить глобальный стиль для тега img в css

Question

У меня есть шаблон, который задает глобальные свойства тега img следующим образом:

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

У меня есть список на моей странице, и у одного из элементов должно быть небольшое прозрачное изображение.Приведенный выше стиль заставляет изображение получать фон и границы, которые я не хочу.Html-список:

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

Я попытался переопределить тег img с помощью приведенного ниже кода, но Firebug продолжает показывать эти правила с «зачеркнутым» указанием на то, что глобальный стиль img выше имеет приоритет.Я слышал, это может быть потому, что стили id css переопределяют стили классов.Как мне это сделать?

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

Answer 1

Это потому, что CSS использует специфичность при применении стилей (это каскады)

Это должно работать для вас, если вы измените его на

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

Вот объяснение специфичностив условиях Звездных войн: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Answer 2

Просто добавьте #content к вашему первичному селектору CSS:

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

Смотрите демонстрацию здесь: http://jsfiddle.net/alp82/A5rHY/6/

Answer 3

у вас есть разные варианты: вы преобразуете содержимое идентификатора в содержимое класса, или вы преобразуете класс trace_item в идентификатор, или вы добавляете! Важные для вашего класса trace_item, или добавляете #content к .trace_item, также работает

Answer 4

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