0%

css !important真的百分百important？

发表于

这是一个关于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