级联img宽度

Question

我对所有img都有一个通用的CSS，并且有一个特定的img是不同的。我给这个不同的IMG一个ID，但没有改变。

我可以解决，给所有其他img类，但我想明白为什么它是不够的，只是与一般#div img css ?.所以问题是为什么＃内容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; } 

编辑：回复：更新的问题。尽管它应该起作用（在我看来），但由于某种原因它不适用。但是你可以用!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; }