【CSS】!important并非最强

微信订阅号：Rabbit_svip

在CSS学习过程中，一个不可避免的知识点就是CSS优先级问题，也可以说CSS特制度问题。

id选择器 > 类选择器 > 标签选择器 ……

更详细的特制度计算问题，可以看【CSS】样式的优先级

---

一般都会认为 !important是最强的，它甚至能把内联样式也干掉。

<!-- html代码 -->

<div style="width: 400px;"></div>

/* CSS代码 */
div {
  width: 100px !important;
  height: 200px;
  background: hotpink;
}

微信订阅号：Rabbit_svip

可以看出!important的强大。

但最大的也会有弱点，就是 min-width、max-width、min-height、max-height 这4个属性。

以 width 举例说明。

<!-- HTML代码 -->

<div style="width: 400px !important;"></div>

/* CSS代码 */

div {
  max-width: 100px ;
  height: 200px;
  background: hotpink;
}

大部分人都会认为，这时div的宽度是400px，因为400px设置了!important，同时也是内联样式，特制度肯定很高。

微信订阅号：Rabbit_svip

还没完。当 min-width 大于 max-width 时，就要论个你死我活了。

<!-- HTML代码 -->

<div style="width: 400px !important;"></div>

/* CSS代码 */

div {
  min-width: 200px;
  max-width: 100px ;
  height: 200px;
  background: hotpink;
}

微信订阅号：Rabbit_svip

目测也能看到这是一个 200px * 200px 的div。

height其实也一样，我就不举例说明了。自己测吧~

最后注意2点

当 min-width、max-width、min-height、max-height 和 !important 发生冲突时，前面4个才是大哥。

当 min 和 max 发生冲突时，min才是大哥。