html - 重要的!烦恼

Question

我还是不明白，“test1”段落是哪种颜色，为什么？

<style>
  p {
    color: red; 
    font-style: italic;
  }
</style>

<div style="color: green;!important">
  <p style="color: blue;">test1</p>
  <p>test2</p>
</div>

Answer 1

重要性不级联。

即使父元素(<div>)有一个!important属性(请注意，由于语法错误，它实际上没有)，它仍将被应用于子元素的任何属性覆盖。

!important只能覆盖应用于相同 元素的其他规则。

因此，第一个<p>将是蓝色的，因为没有什么可以覆盖它的内联样式。