css样式的优先级总结

参考资料：
1、CSS选择器及优先级 总结
2、Web前端面试指导(十三)：css样式的优先级是怎么样的？
3、CSS的四种引入方式与特点

• 不同级别

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
2. 作为style属性写在元素内的样式（行内样式）
3. id选择器
4. 类选择器
5. 元素选择器
6. 通配符选择器
7. 浏览器自定义或继承

总结排序：!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性

• 同一级别

(1) 同一级别中后写的会覆盖先写的样式

(2) 同一级别css引入方式不同，优先级不同 
总结排序：内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)。

对于选择器优先级，还可以通过计算权重值来比较。（请参见：狠狠戳我）

• 权重规则

(1)一个行内样式记 1000 分；
(2)一个ID 记 100 分；
(3)一个类class或伪类（如:link）记 10 分；
(4)一个标签tag或伪元素（如::first-line) 记 1 分； 

/*权重为1*/
div{
}

/*权重为10*/
.class1{
}

/*权重为100*/
#id1{
}

/*权重为100+1=101*/
#id1 div{
}

/*权重为10+1=11*/
.class1 div{
}

/*权重为10+10+1=21*/
.class1 .class2 div{
} 

注：摘自《CSS实战手册》110页