【CSS优先级与!important】

CSS样式优先级:

1、相同权值情况下,CSS样式的优先级总结来说,就是——就近原则(离被设置元素越近优先级别越高):

内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。


2、权值不同时,浏览器是根据权值来判断使用哪种css样式的,哪种样式权值高就使用哪种样式。

下面是权值的规则:

标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。

举例:

div {color: red;}/*标签,权值为1*/

div span {color: green;}/*两个标签,权值为1+1=2*/

div>span {color: purple;}/*权值与上面的相同,因此采取就近原则*/

.main {color: white;}/*类选择符,权值为10*/

div span.warning {color: purple;}/*权值为1+1+10=12*/

#main .con p {color: yellow;}/*权值为100+10+1=111*/


3、CSS最高优先级:!important

举例:

div {

    color: red!important;/*!important 要写在分号前*/

    color: blue;

}

虽然程序由上而下运行,但是由于!important 将当前所在行的样式优先级升至最高,因此以上代码最终颜色为红的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容