Question

我有一些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>

我记得三种风格的优先级是内联＆gt;内部＆gt;外部。但是上面的代码，名为'big'的类的图片，内联样式将其高度设置为84px，宽度为95，为什么内部样式会影响结果样式？任何人都可以帮忙吗？

Answer 1

<img class="big" src="logocss.gif" width="95" height="84" />

在上面，width和height不是样式规则，它们是元素的属性（CSS应该替换）。我猜想属性会覆盖样式规则，但也许是另一种方式。无论哪种方式，你的问题的基本答案是那些不是内联样式，所以你对优先级的理解仍然是正确的。请尝试以下方法：

<img class="big" src="logocss.gif" style="width:95px; height:84px;" />

并查看应用的内容。

内联风格和内部风格的优先级

1 个答案: