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

1、什么是选择器的权重

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

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

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

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

2、基础权重

选择器	权重
!important	infinity
行内式	1000
id	0100
class | 属性 | 伪类	0010
标签 | 伪元素	0001
通配符	0000

这里的权重不是十进制、而是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选择器的权重比标签选择器要高，最后加权肯定是黑色的权重更高。其他更复杂的复合选择器也同理可得，只需要将每个权重相加即可，再比较即可得出谁生效。