在 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 的级联层级的提升规则是逆向越级,非常有趣。