CSS的选择器是有权重的,当不同选择器的样式设置有冲突时,会采用权重高的选择器设置样式。权重(即优先级)的规则如下,权重越高,优先级越高,!important是CSS1就定义的语法,作用是提高指定样式的应用优先权。
语法格式:{cssRule !important},即写在定义的最后面,例如:box{color:red !important} 声明了!important的样式,具有最高的优先级,此篇博客主要说一下选择器优先级以及何时用!important
语法格式:{cssRule !important},即写在定义的最后面,例如:box{color:red !important} 声明了!important的样式,具有最高的优先级,此篇博客主要说一下选择器优先级以及何时用!important
选择器优先级:
(1)ID>class>元素选择器
(2)结果较大的优先级较高;
(3)结果相同,则后定义的优先级较高
(4)创作者的优先级高于浏览者,网页编写者设置的CSS样式的优先权高于浏览器所设置的样式。
(5)继承的CSS样式优先级低于后来指定的CSS样式
(6)若样式值中含有!important,则该值优先级最高
何时用:
A) 一种情况
你的网站上有一个设定了全站样式的CSS文件,同时你(或是你同事)写了一些效果通常都是很差的行内样式(行内样式的优先级是最高的)。在这种情况下,你就可以在你全局的CSS文件中写一些!important的样式来覆盖掉那些直接写在元素上的行内样式。
B) 另一种情况
#someElement p {
color: blue;
}
p.awesome {
color: red;
}
在外层有 #someElement 的情况下,你怎样能使 awesome 的段落变成红色呢?这种情况下,如果不使用!important,第一条规则永远比第二条的优先级更高。
总结:
通过此小知识点有收获了很多,虽然可以用此属性将级别设置到最高,但也不能乱用