在我们定义css样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。其实css为每一种基础选择器都分配了一个权重。
我们简化理解：
CSS权重计算：
最顶层：!important 权重值：无限大
第一：内联样式（style） 权重值:1000
第二：id选择器 权重值:100
第三：类选择器 权重值:10
第四：标签&伪元素选择器 权重值:1
第五：通配（*）、>、+ 权重值:0
使用不同的选择器对同一个元素设置样式，浏览器会根据选择器的优先级规则解析css样式。对于由多个基础选择器构成的复合选择器（并集选择器除外），其权重为这些基础选择器权重进行叠加。（如果权重相同，就近原则）
例如下面的css代码：
p strong {
color: red;
} /* 权重为1+1 */
strong.blue {
color: black;
} /*权重为1 + 10 */
.father strong {
color: yellow;
} /*权重为10 + 1 */
p.father strong {
color: aqua;
} /* 1 +10 +1 */
p.father .blue {
color: blanchedalmond;
} /* 权重为1+10+10*/
#header strong {
color: beige;
} /*权重为100 +1 */
#header strong.blue {
color: gold;
} /* 权重为100 + 1 +10 */
注意：
在计算权重时还要考虑继承，在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，子元素的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
留心♥：
复合选择器的权重为组成它的基础选择器权重的叠加，但是这种叠加并不是简单的数字之和。
我们来看一段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.delLine {
text-decoration: line-through;
}
div div div div div div div div div div div h1 {
text-decoration:underline
}
</style>
</head>
<body>
<div><div><div><div><div><div><div><div><div><div>
<h1 class="delLine">且看</h1>
</div></div></div></div></div></div></div></div></div>
</body>
</html>
如果仅仅将基础选择器的权重相加，那么上面的后代选择器div加上h1的权重为11，大于类选择器.delLIne的权重10，但是文本并没有像预期的那样添加下划线，而是显示了类选择器的删除线。
说明无论在外面添加多少个div标记，即复合选择器的权重无论多少个标记选择器的叠加，其权重都不会高于类选择器。
同理，复合选择器的权重无论多少个类选择器和标记选择器的叠加，其权重都不会高于id选择器。
总结：
优先级比较：!important > 内联样式 > id > class > 标签 > 通配
