权重决定了哪一条规则会被浏览器应用在元素上
层叠的过程
比较优先级：优先级低，淘汰，优先级高，胜出，相同则比较特殊性
比较特殊性：特殊性低，淘汰，特殊性高，胜出，并列则比较源次序
比较源次序：源次序靠前，淘汰，源次序靠后，胜出
若属性值后跟上！important，则表示是一条重要声明
这里将选择器分为了a b c d四类 若选择器中有style 则a类加1 否则为0
如：两个不同的选择器都选中了同一个p标签
#main .content p{
color：green；
}
这里#main是id选择器 则b类加1， .content 为class选择器 则c类加1， p是元素 则d类加1 最终结果为{0,1,1,1}
a:hover p{
color：red；
}
这里a:hover为伪类 则c类加1 ， p是元素 则d类加1 最终结果为{0,0,1,1}
现在比较两个数组{0,1,1,1}和{0,0,1,1} 显而易见 {0,1,1,1}要大 则运行#main .content p中的样式
优先级：！important>style>id>class>元素>*
另一种较简单的方式权重记忆口诀
！important 正无穷大
一个行内样式 +1000
一个id +100
一个属性选择器/class或者伪类 +10
一个元素名或者伪元素 +1
算出来的最终结果值最大则运用谁的样式
如果值相同 则使用后出现的选择器的样式