层叠样式类型
- 类型
- 浏览器默认样式
- 浏览器用户自定义样式
- 外部样式表
- 内部样式表
- 内联样式表
- 样式顺序
浏览器默认样式 < 浏览器用户自定义样式 < 外部样式表 < 内部样式表 < 内联样式表
权值：标识当前选择器的重要程度，权值越大优先级越高
元素选择器：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来指定。
