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

Question

我的问题是我需要下面的代码片段才能工作，但出于某种原因，内部样式表的元素样式 (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 尽管如此，内联样式声明的优先级高于任何作者声明，无论其选择器如何：

带有 !important
使用 !important
内联样式声明
作者样式表声明
UA 样式

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

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

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

Answer 2

!important 元素上的样式声明优先于内联。所以，在你的问题中 !important on IMG height 优先于 inline height style on IMG.

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

Why does the inline stylesheet's 'img' element styles override the inline style on `img` tags?

css

css-selectors

css-specificity

代码示例

其他说明