!important、行内样式、嵌入样式、外链样式、id选择器、类选择器、标签选择器、复合选择器、通配符选择器、继承样式。
回答:CSS样式的优先级可以分为五大类。
第一类!important,无论以何种方式引入,何种选择器,它的优先级都是最高的。
第二类引入方式,行内样式的优先级要高于嵌入和外链,若嵌入和外链使用的选择器相同就看它们在页面中插入的顺序,后面插入的覆盖前面的。
第三类选择器,选择器的优先级为id选择器 >(类选择器 | 伪类选择器 | 属性选择器)>(后代选择器 | 伪元素选择器)>(子选择器 | 相邻选择器)> 通配符选择器。
第四类继承样式,是所有样式中优先级比较低的。
第五类浏览器默认样式,优先级最低。
加分回答:使用!important要谨慎,一定要优先考虑使用样式规则的优先级来解决问题而不是!important。
只有在需要覆盖全站或外部CSS的特定页面中使用!important。
永远不要在你的插件中使用!important。
永远不要在全站范围的CSS代码中使用!important。
优先级的比较指的是相同的样式属性,不同样式属性优先级比较失效。比如:在设置max-width时注意,已经给元素的max-width设置了!important但是还不生效,很有可能就是被width覆盖了。
举例:div最终的宽度还是200px 。
div {
max-width: 400px !important;
height: 200px;
background-color: #f00;
width: 200px;
}