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

Web前端开发 专栏收录该内容
24 篇文章 0 订阅

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基础篇

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 数字50 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值