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

哪种颜色将是段落“test1”，为什么？

蓝色。即使你的错字，它仍然是蓝色的。该color: green !important样式仅适用于div. 因此内联样式color: blue;是最具体的。

请参阅此小提琴中的差异。

我鼓励您了解CSS 特殊性是如何工作的。

Answer 2

重要性不会级联。

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

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

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

Answer 3

它将是蓝色的，因为它有一个样式属性使它变成蓝色。div 表示绿色，但!important分号后有标志。但即使你有一个空格而不是分号，样式属性也会覆盖它。它将是蓝色的。