Xaire

CSS样式优先级

一、层叠

什么选择器在层叠中胜出取决于三个因素（这些都是按重量级顺序排列的——前面的的一种会否决后一种）：

重要性（Importance）、专用性（Specificity）、源代码次序（Source order）

1.层叠性
可以为一个元素定义多个样式，当样式属性不冲突时，可以同时将这些样式应用到元素上
div{
color:red;
}
div{
font-size:20px;
}
div{
background:gray;
}

2.优先级
如果样式声明冲突时，会按照样式的优先级来应用定义的样式规则
由低到高：
   浏览器默认设置最低
   内部样式和外部样式中(就近原则即：源码次序）
   内联样式最高

3.调整显示的优先级（重要性）
!important规则：
调整显示的优先级
将!important添加在属性值之后，与值之间用空格隔开，就能优先使用当前样式
ex:
color:red !important;

注意: 重载这个 !important 声明的唯一方法是在后面的源码或者是一个拥有更高专用性的源码中包含相同的 !important 特性的声明。

4.选择器的优先级（专用性）
权值：标识当前选择器的重要程度，权值越大优先级越高。
元素选择器/伪元素选择器：1
类选择器/伪类选择器/属性选择器： 10
ID选择择器：100
内联样式： 1000

选择器的权值加到一起，大的优先
权值相同，以后定义的为主（源码次序）