CSS优先级与！important

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 将当前所在行的样式优先级升至最高，因此以上代码最终颜色为红的。

原文地址