本文将介绍什么权重计算规则。
参考文章：CSS 选择器权重计算规则
参考文章：css样式权重优先级，css样式优先级
在计算权重之前首先必须有以下基础：
一、样式类型：行间（行内） 样式，内联（内部）样式，（外联）外部样式。
二、选择器的类型：id,class,标签，属性，*，伪类，伪元素，后代选择器，子类选择器，相邻选择器
权重计算规则：
1、第一优先级：无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。（ie6支持上有些bug）。
2、第一等：内联样式，如：style="color:red;"，权值为1000.（该方法会造成css难以管理，所以不推荐使用）
3、第二等：ID选择器，如：#header，权值为0100.
4、第三等：类、伪类、属性选择器如：.bar， 权值为0010.
5、第四等：标签、伪元素选择器，如：div ::first-line 权值为0001.
6、通配符，子选择器，相邻选择器等。如*，>,+, 权值为0000.
7、继承的样式没有权值。
权重计算规则举例（19-12-02）
- 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、权重相同的情况先，后写的颜色会覆盖前写的样式。
4、通配符，子选择器，相邻选择器，虽然权重为0000，但是比继承的样式优先
实例
a{color: yellow;} /*权值：0,0,0,1*/
div a{color: green;} /*权值：0,0,0,2*/
.demo a{color: black;} /*权值：0,0,1,1*/
.demo input[type="text"]{color: blue;} /*权值：0,0,2,1*/
.demo *[type="text"]{color: grey;} /*权值：0,0,2,0*/
#demo a{color: orange;} /*权值：0,1,0,1*/
div#demo a{color: red;} /*权值：0,1,0,2*/
<a href="">第一条应该是黄色</a> <!-适用第1行规则->
<div class="demo">
<input type="text" value="第二条应该是蓝色" /><!-适用第4、5行规则，第4行优先级高->
<a href="">第三条应该是黑色</a><!-适用第2、3行规则，第3行优先级高->
</div>
<div id="demo">
<a href="">第四条应该是红色</a><!-适用第5、6行规则，第6行优先级高->
</div>
