Каскадная ширина img

Question

У меня есть общий css для всех img, и есть определенный img, который отличается. Я даю id этому другому img, но ничего не меняется.

Я могу решить, что дает класс всем другим img, но я хочу понять, почему этого недостаточно, просто с общим #div img css ?. Поэтому возникает вопрос, почему #content img не работает? Каковы правила в каскаде в этом случае?

Вот пример очень упрощен: http://jsfiddle.net/GTqgP/5/

CSS

#content img { width:200px; } 
#second { width:100px; } 

HTML

<div id="content" >  
<img id="first" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" /> 
<img id="second" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" /> 
</div> 

Answer 1

Речь идет о правилах, вы должны иметь более конкретные правила, если вы хотите second ID принять precendence,

добавить

#content #second { width:100px; } 

Вы также можете позвонить:

#second { width:100px !important; } 

Но !important не должен быть действительно необходим необходимо, если у вас есть более конкретные правила для применения различных стилей к этому ID

Answer 2

Ваша декларация second неправильно. Он должен быть

#second { width: 100px; } 

EDIT: Re: обновленный вопрос. Хотя он должен работать (по-моему), по какой-то причине это не так. Однако вы можете использовать !important классификатор, чтобы заставить его работать:

#second { width: 100px !important; } 

Answer 3

Вы пропустили # на «вторую» идентификации секунды на вашем CSS.

Оно должно быть:

#second { width:100px; } 

Answer 4

попробовать этот

http://jsfiddle.net/GTqgP/ 

HTML

<img id="first" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" /> 
<img class="second" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" /> 

CSS

img { width:200px; } 
.second { width:100px; }