CSS补充篇—css选择器权重计算问题

CSS权重计算

在开发过程中，编写css样式时，会有css属性和选择器的优先级问题。因此我们需要了解内部结构和原理才能达到自己想要的效果。
首先你需要了解每个选择器的权重值是多少，如果您不知道，请点击下方链接跳转到另外一篇博客中，寻找到选择器权重表进行查看
CSS基础篇选择器权重
就单论css权重这个知识点，据说有很多在大厂里面的前端工程师都有些人不知道这个知识点，所以学到就是赚到，下面就让我举几个例子带大家感受一下权重的重要性吧！

---

权重计算的特点：只要写在同行的选择器，只要将每个选择器的权重值相加即可

例1：

HTML文件代码如下所示

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

CSS文件代码如下所示

//100 + 1=101
#idDIv p{
    background-color: red;
}
//   10   +  10=20
.classDiv .classP{
    background-color: green;
}

代码运行结果为红色

例2：

HTML文件代码如下所示

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

CSS文件代码如下所示

//100 + 1=101
#idDIv p{
    background-color: red;
}
//1 + 10  + 100=111
div .classP #idP{
    background-color: green;
}

代码运行结果为绿色

例3：

HTML文件代码如下所示

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

CSS文件代码如下所示

//100 + 1   +10   =111
#idDIv p .classsP{
    background-color: red;
}
//1 + 10  + 100=111
div .classP #idP{
    background-color: green;
}

代码运行结果为绿色
两者权重相同，后面的代码会覆盖前面的代码，因此结果也是绿色

例4：

HTML文件代码如下所示

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

CSS文件代码如下所示

//1 + Infinity
div#idDIv p .classsP{
    background-color: red!important;
}
//Infinity
div .classP #idP{
    background-color: green!important;
}

代码运行结果为红色

---

权重值的运用就是这些，希望对您有帮助，学会就比别人更上一层楼，点个关注，更多小细节的知识分享给你！

关注我，一起自学前端！！！
这里还有其他内容哦！
HTML基础篇
CSS基础篇