級聯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; }