css !important真的百分百important?

Published on in 前端 with 402 views

这是一个关于css优先级的问题,此篇文章纯原创,翻版必究。

示例代码

<style>
  .background {
	background-color:red ! important;
  }

  .white {
	background-color:white;
  }

</style>
<body>
  <div class="background white">
	aaa
  </div>
</body>

毫无疑问,我们的div的背景色会是红色,因为!important属性会将red的优先级放在white之上,但如果我们对代码进行如下修改:

<style>
  .background {
	background-color:red ! important;
  }

  body .white {
	background-color:white;
  }

</style>
<body>
  <div class="background white">
	aaa
  </div>
</body>

那么在火狐浏览器下,我们div的背景色将一半为红,一半为白。
因为body .white的写法,让white的描述更加具体,而css优先级的判断算法里面,对于描述更具体的,优先级更高,所以!important并不会百分百important

Responses