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

时间:2016-01-15 18:20:01

标签: css css3 css-selectors css-specificity

我的问题是我需要下面的代码段才能工作,但由于某种原因,内部样式表的元素样式(img {height: !important;})会覆盖img标记上的内联样式({{1} })。的为什么吗

我是否在CSS顺序或处理和继承中出错?我错过了别的什么吗?

代码示例



style="height:200px;

img { height:auto !important }




其他说明

我知道我可以添加!重要的img使其工作,但为什么我必须这样做? 我也知道这不是理想的代码,并且不推荐使用<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>。然而,最终媒体是HTML电子邮件,所以我需要使用不太理想的代码。

2 个答案:

答案 0 :(得分:2)

选择器特异性和重要性尽管如此,内联样式声明的优先级高于任何作者声明,无论其选择器如何:

  1. 带有!important
  2. 的内联样式声明
  3. 使用!important
  4. 创作样式表声明
  5. 内联样式声明
  6. 作者样式表声明
  7. UA样式
  8. 与具有内联样式属性的元素匹配的选择器是否包含[style]属性选择器无关紧要。

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

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

答案 1 :(得分:1)

!元素上的重要样式声明优先于内联。所以,在你的问题中!IMG高度的重要性优先于IMG的内联高度样式。