CSS权重规则

在计算权重之前首先必须有以下基础：
一、样式类型：行间（行内） 样式，内联（内部）样式，（外联）外部样式。
二、选择器的类型：id,class,标签，属性，*，伪类，伪元素，后代选择器，子类选择器，相邻选择器

权重计算规则：
1、第一优先级：无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。（ie6支持上有些bug）。
2、第一等：内联样式，如：style=“color:red;”，权值为1000.（该方法会造成css难以管理，所以不推荐使用）（HTML内容 不常用）
3、第二等：ID选择器，如：#header，权值为0100.
4、第三等：类、伪类、属性选择器如：.bar， 权值为0010.
5、第四等：标签、伪元素选择器，如：div ::first-line 权值为0001.
6、通配符，子选择器，相邻选择器等。如*，>,+, 权值为0000.
7、继承的样式没有权值。

权重计算规则举例
important的权重为1,0,0,0
ID的权重为0,1,0,0
类的权重为0,0,1,0
伪类的权重为0,0,1,0
属性的权重为0,0,1,0
标签的权重为0,0,0,1
伪对象的权重为0,0,0,1
通配符的权重为0,0,0,0
比较的规则
1、1000>09999：从左往右逐个等级比较，前一等级相等才能往后比较（1000与09999对比的时候需要补位，即10000>09999）。
2、无论是行内，内部，外部样式，都是按照以上的权重方式进行比较。面试的时候经常会遇见优先级比较，而答案往往是：行间>内部>外部；id>class>元素（标签）,不能说是错的也不能说是对的，只能说是错觉，但是错觉也有错，比如对同一个元素操作且权重相等，先写内部样式，再引用外部样式，这时候由于层叠样式的关系显示出来的是外部样式，即：外部样式>内部样式。
3、权重相同的情况先，后写的颜色会覆盖前写的样式。
如：div.box1 div.box2 .box3 0,3,2
div.box1 .box2 box3 0,3,1
.box1 div.box2 div.box3 0,3,2
所以中间的 0,3,1失败
此时这个都是0,3,2权重，所以看先后顺序，第三个成功
近，权，下
4、通配符，子选择器，相邻选择器，虽然权重为0000，但是比继承的样式优先

作者：louiebb
链接：https://www.jianshu.com/p/dc97ef9d1fe6
来源：简书