CSS中样式的优先级

层叠样式类型

• 类型
  • 浏览器默认样式
  • 浏览器用户自定义样式
  • 外部样式表
  • 内部样式表
  • 内联样式表
• 样式顺序

浏览器默认样式 < 浏览器用户自定义样式 < 外部样式表 < 内部样式表 < 内联样式表

• 样式表内部选择器

权值：标识当前选择器的重要程度，权值越大优先级越高
元素选择器：1
类选择器：10
伪类选择器：10
ID选择器：100
内联样式：1000
生效顺序：元素选择器< 类派生选择器 < ID选择器 <内联样式
【例如】
<div id="d1">
    <p class="p1">
    <span class="s1">this is a span</span>
    </p>
</div>
span{color:red}  /*权值：1*/
p span{color:blue}  /*权值：1+1*/
.p1 span{color:yellow} /*权值：10+1*/
d1 .p1 .s1{color:green} /*权值：100+10+10*/
d1 span{color:gray} /*权值：100+1*/

Summary

（1）样式表的元素选择器选择越精确，则其中的样式优先级越高。
   id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
（2）对于相同类型选择器指定的样式，在样式表文件中，越靠后的优先级越高。
（3）一个元素同时应用多个class，后定义的优先(即近者优先)
（4）如果要让某个样式的优先级变高，可以使用!important来指定。