css层叠 权重

权重决定了哪一条规则会被浏览器应用在元素上

层叠的过程
比较优先级：优先级低，淘汰，优先级高，胜出，相同则比较特殊性
比较特殊性：特殊性低，淘汰，特殊性高，胜出，并列则比较源次序
比较源次序：源次序靠前，淘汰，源次序靠后，胜出
若属性值后跟上！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

算出来的最终结果值最大则运用谁的样式

如果值相同 则使用后出现的选择器的样式

原文地址：https://www.cnblogs.com/zms-cyh/p/9349071.html