为什么内联样式表的“img”元素样式会覆盖“img”标签上的内联样式？

Question

我的问题是我需要下面的代码 sn-p 才能工作，但由于某种原因，内部样式表的元素样式 (img {height: !important;}) 覆盖了 img 标记 (style="height:200px;) 上的内联样式。 为什么？

我是在 CSS 顺序还是处理和继承上弄错了？我还缺少其他东西吗？

代码示例

img { height:auto !important }

<img src="https://placehold.it/200x200" width="200" height="200" align="left" border="0">
<img src="http://placehold.it/1x1" height="200" width="9" alt="" align="left" border="0" style="height: 200px;">
<p>Lorem Ipsum cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras tortor turpis, iaculis eu convallis a, pellentesque vitae enim. Fusce commodo vehicula nulla, sit amet congue lacus adipiscing a. Vivamus at convallis nibh. Proin felis turpis, aliquet eu arcu aliquam, accumsan consectetur justo. Vestibulum sit amet arcu quis neque gravida vulputate ut quis sem. Curabitur a metus lacus. Mauris non dolor vitae massa viverra lobortis ut convallis diam. Fusce eu tempor dolor, vitae imperdiet ipsum.</p>

其他说明

我知道我可以将 !important 添加到 img 以使其正常工作，但为什么我必须这样做？ 我也知道这不是 理想 代码，align 已被弃用。但是最终媒体是 HTML 电子邮件，所以我需要使用不太理想的代码。

Answer 1

尽管有选择器的特殊性和 !important，但内联样式声明的优先级高于任何作者声明，无论其选择器如何：

1. 带有 !important 的内联样式声明
2. 使用 !important 编写样式表声明
3. 内联样式声明
4. 编写样式表声明
5. UA 样式

匹配具有内联样式属性的元素的选择器是否包含[style] 属性选择器无关紧要。

您所拥有的是覆盖height: 200px 内联样式的height: auto !important。如果没有 !important 标记，则内联样式将优先。就是这样。

另请参阅：Relationship between !important and CSS specificity

Answer 2

!important 元素上的样式声明优先于内联。因此，在您的问题中，IMG 高度上的重要性优先于 IMG 上的内联高度样式。