css - 级联 img 宽度

Question

我有一个适用于所有 img 的通用 css，并且有一个不同的特定 img。我给那个不同的 img 一个 id，但没有任何变化。

我可以解决为所有其他 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 优先，你需要有一个更具体的规则，

添加

#content #second { width:100px; }

你也可以这样做

#second { width:100px !important; }

但是 !important 如果您有一个更具体的规则来为该 ID 应用不同的样式，那么实际上并不需要它