#书摘 #css #前端
《CSS 选择器世界》叛逆的!important
在CSS属性值的后面添加!important可以提升CSS属性的优先级，例如：
.foo { color: #fff !important; }​

此时，无论使用何种级别的选择器，.foo 元素的顏色都是白色，这个很多人都知道。但是很多人不知道 !important 提升CSS属性优先级的机制，更不知道 !important 有逆向越级的神奇特性。

!important 所起的作用是直接将这个CSS属性带到另一个更高维度的世界中，而这个“更高维度的世界”就是更高级别的级联层级。
此时我们再回顾一下2.1.2节中的级联层级的优先级关系：

(1)设置了!important的浏览器内置样式；
(2)设置了!important的用户设置的样式；
(3)@layer规则中设置的包含!important的样式；
(4)开发者设置的包含!important的样式；
(5)开发者设置的CSS样式；
(6)@layer规则中的CSS样式；
(7)用户设置的CSS样式；
(8)浏览器内置的CSS样式。

可以看到，无论是浏览器内置的CSS样式、用户设置的CSS样式、@layer规则中的CSS样式，还是开发者设置的CSS样式，其中的CSS属性只要被设置了!important，就会拥有一个只属于其自身的级联层级。并且，如果我们观察得足够仔细，就会发现!important的级联层级的提升规则是逆向越级，非常有趣。

所谓“逆向越级”指的是原本级联层级高的CSS使用了!important之后，优先级反而低；而原本名不见经传、在底层苦苦挣扎的低级联层级CSS声明在应用了!important之后，直接“乌鸦变凤凰，鸟枪换大炮”，CSS的优先级反而最高。

由于!important可以轻松使CSS属性的优先级越级，因此，非到万不得已不要使用这个特性，因为这样会大大增加CSS代码的优先级复杂度，从而增加不必要的维护成本。