html - 内联样式和内部样式的优先级

标签 html css inline internal

我有一些如下所示的 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" />

在上面,widthheight 不是样式规则,它们是元素的属性(应该用 CSS 代替)。我猜想属性会覆盖样式规则,但也许恰恰相反。无论哪种方式,你的问题的基本答案是那些不是内联样式,所以你对优先级的理解仍然是正确的。尝试以下操作:

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

看看应用了什么。

关于html - 内联样式和内部样式的优先级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9630703/

相关文章:

javascript - 通过脚本均衡 div - onload vs ondocumentready

javascript - 将对象的键绑定(bind)到 AngularJS 中的 radio 输入值

css - 滥用 :target to style multiple elements

CSS/SCSS 位置 : absolute tooltip - prevent getting out of screen

css - 如何使表单标签和内容内联?

c++ - 如何根据编译时参数使用内联函数的不同重载?

html - DIV 在前台

html - 如果父级有 (15,45,75,105) 个元素,则仅隐藏最后一个元素(仅限 CSS)

javascript - 如何使用左右按钮水平滚动 div

html - 如何将内联 img href 与其所在的文本标签对齐?