CSS最高优先级!important用法详解
在 CSS 属性值的后面添加 !important，可以提升 CSS 属性的优先级。
例如：
.foo { color:#fff !important;}
此时，无论使用何种级别的选择器，.foo 元素的颜色都是白色。
很多读者对 !important 的认知比较传统，认为 CSS 的优先级就像一个小世界，设置了 !important 之后，这个 CSS 属性就可以在 CSS 世界中“称王称霸”。
实际上，!important 所起的作用不是这样，而是直接将这个 CSS 属性带到另一个更高维度的世界中，而这个“更高维度的世界”就是更高级别的级联层级。
回顾一下级联层级的优先级关系：
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 的级联层级的提升规则是逆向越级，非常有趣。