0

我有一个适用于所有 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>
4

4 回答 4

2

second这是关于您的规则，如果您希望ID优先，您需要有更具体的规则，

添加

#content #second { width:100px; }

你也可以做

#second { width:100px !important; }

但是!important，如果您有更具体的规则来将不同的样式应用于该 ID，则不应该真的需要

于 2013-06-28T13:38:42.623 回答
1

你的声明second是错误的。它应该是

#second { width: 100px; }

编辑：回复：更新的问题。尽管它应该起作用（在我看来），但由于某种原因它不起作用。但是，您可以使用!important限定符使其工作：

#second { width: 100px !important; }
于 2013-06-28T13:38:04.670 回答
1

您在 css 上缺少“second”标识上的 # 。

它应该是：

#second { width:100px; }
于 2013-06-28T13:38:10.217 回答
0

尝试这个

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; }
于 2013-06-28T13:39:47.107 回答