标签：加权 span 权重 选择 生效 div 选择器 CSS

在我们开发前端页面时，往往css会错综复杂，一个元素可能出现多个样式，这个时候如果我们搞不清楚谁生效，就会很麻烦，还要写个demo测试一下。学习这部分内容已经很久了，18年听过姬成老师的课，讲的非常好，今天特来重温一下。

1、什么是选择器的权重

选择器的权重决定了浏览器在渲染页面时所选择渲染的样式，举个例子：

<div class='box'></div>

div{
    width:100px;
    height:100px;
    background-color:red;
}
.box{
    background-color:black;
}

这种情况下，渲染出来的盒子是红色背景还是黑色背景呢？此时浏览器就要根据权重做出抉择，到底让谁生效。上述例子是黑色背景生效，因为class选择器比标签选择器的权重更高，所以权重低的样式就会自动失效。

2、基础权重

这里的权重不是十进制、而是256进制，所以在后面加权的时候不要用十进制的思想加权。

3、多选择器组合加权问题

在实际的使用场景中，选择器往往会被组合使用，以达到精准选择元素并控制元素样式的目的。

常见的选择器：

div span{
    // 后代选择器 也叫派生选择器
}
div > span{
    // 直接子元素选择器
}
div ~ span{
    // div后的span选择器  兄弟选择器
}
div + span{
    // div后紧挨着span选择器  兄弟选择器
}
div span[attrName=attrValue]{
    // 属性选择
}
div>div[attrName=attrValue] span~stromg{
    // 复合选择器
}

当然，这只是选择器的冰山一角，只是使用频率较高，所有的选择器都可以进行组合，组合在一起的选择器，浏览器应该如何抉择谁的样式生效，谁的样式不生效呢，这就涉及到了复合选择器的加权，谁的加权最高，谁就生效。

4、选择器的加权规则

简单的来讲，只要是组合在一起的选择器，就将每一个选择的权重相加即可，这里要注意的是这些权重不是十进制，而是256进制。举个例子：

<div class='box'>
    <p>Hello World!</p>
</div>

div p{
    color:red;
}
.box p{
    color:black;
}

毫无疑问，p的字体颜色绝对是黑色，因为class选择器的权重比标签选择器要高，最后加权肯定是黑色的权重更高。其他更复杂的复合选择器也同理可得，只需要将每个权重相加即可，再比较即可得出谁生效。 

标签：加权,span,权重,选择,生效,div,选择器,CSS
来源： https://blog.csdn.net/weixin_42496309/article/details/121177151

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。