Question

我对所有img都有一个通用的CSS，并且有一个不同的特定img。我给那个不同的img一个id，但没有任何改变。

我可以解决为所有其他img提供课程但我想理解为什么仅仅与一般的#div img css一起是不够的。所以问题是为什么#content img不起作用？在这种情况下，级联中的规则是什么？

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

但是如果您有一个更具体的规则来应用不同的样式到该ID

，那么!important不应该是真正必要的

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

级联img宽度

4 个答案: