重要的!麻烦

时间:2012-06-12 18:15:51

标签: html css

我仍然没有得到它,哪种颜色将是段落“test1”,为什么?

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

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

3 个答案:

答案 0 :(得分:3)

  

哪个颜色将是段落“test1”以及为什么?

<强>蓝即可。即使你的拼写错误,它仍然是蓝色的。 color: green !important样式仅适用于div内的文字。因此,color: blue;内嵌样式是特定的

查看this fiddle中的差异。

我鼓励您了解how CSS specificity works

答案 1 :(得分:3)

重要性不会级联。

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

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

因此,第一个<p>将为蓝色,因为没有任何内容可以覆盖其内联样式。

答案 2 :(得分:0)

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