秒懂CSS权重

在CSS中，有一个非常核心的知识点，那就是CSS权重。我们知道CSS中有五大选择器：

• 元素选择器
• 类选择器
• ID选择器
• 属性选择器
• 父子选择器

当在有复杂层级的样式覆盖时，如果没有权重知识，往往很难区分样式覆盖问题。比如：

<div class="classDiv" id="idDiv">
    <p class="classP" id="idP">文字</p>
</div>

#idDiv p{
    background-color: red;
}
div .classP#idP {
    background-color:green;
}

在浏览器内核中，真实的记录着各个CSS选择器具体权重值：

• !important infinity
• 行间样式 1000
• ID选择器 100
• class|属性|伪类 10
• 标签选择器|伪元素 1
• 通配符* 0

注意1：他们的进制可不是10，而是256,0和1整整差了256个进制。

注意2：在计算机中infinity虽然代表无穷大，但却是一个定量值，也就是说infinity+1 大于 infinity。

知道权重值得知识后那么我们很容易就能解决CSS覆盖的问题：

100    1
#idDiv p{
    background-color: red;
}
1     10    100
div .classP#idP {
    background-color:green;
}

权重的计算方式为多个并列选择器的值相加进行比较，那么最终得出是 green。