本文将介绍什么权重计算规则，摘录来自博客园。
原文博主：全全的前端浆糊
原文链接：https://www.cnblogs.com/dq-Leung/p/4213375.html
在计算权重之前首先必须有以下基础：
一、样式类型：行间（行内） 样式，内联（内部）样式，（外联）外部样式。
二、选择器的类型：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、继承的样式没有权值。

比较的规则

1、1000>09999：从左往右逐个等级比较，前一等级相等才能往后比较。
2、无论是行内，内部，外部样式，都是按照以上的权重方式进行比较。面试的时候经常会遇见优先级比较，而答案往往是：行间>内部>外部；id>class>元素（标签）,不能说是错的也不能说是对的，只能说是错觉，但是错觉也有错，比如对同一个元素操作且权重相等，先写内部样式，再引用外部样式，这时候由于层叠样式的关系显示出来的是外部样式，即：外部样式>内部样式。
3、权重相同的情况先，后写的颜色会覆盖前写的样式。
4、通配符，子选择器，相邻选择器，虽然权重为0000，但是比继承的样式优先

实例

code
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>
`