CSS样式优先级（权值）

CSS权值优先级

• 标签的权值为1；

• 类选择符的权值为10；

• ID选择符的权值为100；

• 还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

p{color:red;} 
/*一个标签，权值为1*/

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

.warning{color:white;}
/*一个类选择符，权值为10*/

p span.warning{color:purple;} 
/*两个标签和一个类选择符，权值为1+1+10=12*/

#footer .note p{color:yellow;} 
/*一个ID选择符、一个类选择符和一个标签，权值为100+10+1=111*/

• 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）；

• 如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值，会根据这些CSS样式的先后顺序来决定，处于最后面的CSS样式会被应用。

p{color:red;}
p{color:green;}
<!--文本会设置为绿色-->

<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

• 当有些特殊的情况需要为某些样式设置具有最高权值，可以用！important。

  • !important要写在分号前面。

  • 注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。

p{color:red!important;}
p{color:green;}
<!--这时 p 段落中的文本会显示的red红色。-->

<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>