我有一些如下所示的 HTML 和 CSS 代码
<html>
<head>
<style type="text/css">
img.normal
{
height:auto;
}
img.big
{
height:120px;
}
p.ex
{
height:100px;
width:100px;
}
</style>
</head>
<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br />
<img class="big" src="logocss.gif" width="95" height="84" />
<p class="ex">The height and width of this paragraph is 100px.</p>
<p>This is some text in a paragraph. This is some text in a paragraph.
This is some text in a paragraph. This is some text in a paragraph.
This is some text in a paragraph. This is some text in a paragraph.</p>
</body>
</html>
我记得三种样式的优先级是inline > internal > external。但是上面的代码,类名为'big'的图片,内联样式设置了高度为84px,宽度为95,为什么内部样式会影响结果样式?谁能帮忙?
最佳答案
<img class="big" src="logocss.gif" width="95" height="84" />
在上面,width
和height
不是样式规则,它们是元素的属性(应该用 CSS 代替)。我猜想属性会覆盖样式规则,但也许恰恰相反。无论哪种方式,你的问题的基本答案是那些不是内联样式,所以你对优先级的理解仍然是正确的。尝试以下操作:
<img class="big" src="logocss.gif" style="width:95px; height:84px;" />
看看应用了什么。
关于html - 内联样式和内部样式的优先级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9630703/