加了!important没用?失效了?记录一个一直被我忽视的关于!important提升权重的问题

情景再现

这是我今天写一个小demo时发现的自己一直忽视的问题。先截取一下我的代码片段:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>test</title>
  <style>
    #box {
     
      color: green !important;
    }

    .pink-text {
     
      color: pink;
    }
  </style>
</head>

<body>
  <div id="box">
    <div class="pink-text">我是什么颜色?</div>
  </div>
</body>

</html>

代码很简单,大家可以猜一下,上面这个文本的颜色是什么颜色的?

答案揭晓

没错,是粉色的,不是绿色的。

加了!important没用?失效了?记录一个一直被我忽视的关于!important提升权重的问题_第1张图片

但是我一直以为这个地方文本应该是绿色的。因为虽然我给这个文本加了一个pink-text的class,指定文本颜色为粉色,但我同样指定了它的父级,也就是id为box的div的字体颜色为绿色,并在后面加了!important。那它的优先级应该最高才对,为什么依然被它本身的样式覆盖了呢?

分析

于是我去查了一下,得到的结论是,虽然这边class为pink-text的div继承了id为box的div的样式,但它自己也被指定了样式。

!important不影响继承性 ,也就是说,继承过来的!important无法提升它的权重,权重该是0还是0。那么自然在它自己已经被指定样式的情况下,它的样式就可以覆盖继承过来的带有!important的样式了。

只有大家都是继承而来的属性或者都是被指定的样式的时候,!important的权重提升才会有作用。

变式

在刚才的基础上,如果是下面这样的代码,文本颜色又是什么颜色的呢?

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>test</title>
  <style>
    #box > .pink-text {
     
      color: green !important;
    }

    .pink-text {
     
      color: pink;
    }
  </style>
</head>

<body>
  <div id="box">
    <div class="pink-text">我是什么颜色?</div>
  </div>
</body>

</html>

没错,这个地方就是绿色的了。可以看到,这里使用了子元素选择器“>”。虽然根据就近原则,文本颜色应该还是粉色,但是由于上面的样式增加了!important,此时权重提升有效,自然就可以覆盖下面那个近的样式了。

加了!important没用?失效了?记录一个一直被我忽视的关于!important提升权重的问题_第2张图片
这时候,即使用“style=‘color:red;’”的行内样式,也依然覆盖不了加了!important的样式。

加了!important没用?失效了?记录一个一直被我忽视的关于!important提升权重的问题_第3张图片
附一下css的优先级排序

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

小结

我一直认为!important是无论在什么情况下,只要加了就可以影响到的,是最高优先级;现在经过这个之后我明白,虽然它确实是最高优先级,但它的权重提升是有条件的,不是无论什么情况下都好使的。如果大家和我一样有这个错误的观点,要赶紧把它纠正过来。这算是一个比较低级的错误,但也确实好好给我上了一课,也督促我后面一定要更加细心。

你可能感兴趣的:(css,css,前端)