当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定。
我们一般为不同的选择器分配不同的权重，通常用一个四位数来表示选择器的优先级大小，数字之间用','隔开。从左往右比较数字的大小，若千位相同则比较百位，百位相同则比较十位，依次类推。
以下表格是常见的几个选择器所对应的优先级大小，级别从高到低排列：
| 选择器 | 优先级（千位，百位，十位，个位） |
|---|---|
| 内联样式 | （1，0，0，0） |
| id选择器 | （0，1，0，0） |
| 类和伪类选择器 | （0，0，1，0） |
| 元素选择器 | （0，0，0，1） |
| 通配选择器* | （0，0，0，0） |
主要选择器的权重比较
接下来我们来对上面的优先级表格进行举🌰解释<div id="style1" class="style2">
我是div
</div>
#style1{
color:red ;
}
.style2{
color:yellow ;
}
这里一共有两个选择器：id选择器和类选择器，两个选择器对相同元素进行颜色设置，此时发生了样式冲突。这时我们来比较一下选择器的优先级大小：
由上面的优先级表可知，id选择器style1的权重大小为（0，1，0，0），而类选择器style2的权重大小为（0，0，1，0）。对数字从左往右进行比较，两者千位都为0，而style1的百位为1，style2的百位为0，所以style1的优先级>style2，文字的颜色为红色。
再来看一个🌰
<div class="style1 style2">
我是div
</div>
.style1{
color: red;
}
.style2{
color:green;
}
style1和style2都是类选择器，此时两者的权重大小都是为（0，0，1，0），优先级一样。在优先级一样的情况下，由定义顺序较后的决定，即后面定义的会把前面的覆盖掉，此时文字颜色为绿色。
优先级累加原则
比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则越优先显示。
<div class="style1 style2">
我是div
</div>
div.style1{
color: red;
}
.style2{
color:green;
}
这次的显示结果是红色的字体，为什么呢？因为根据我们的累加原则，第一个样式是一个元素选择器和一个类选择器，元素选择器对应的优先级为（0，0，0，1），类选择器对应的优先级为（0，0，1，0），两者相加为（0，0，1，1）。而第二个样式仅仅就一个类选择器，优先级为（0，0，1，0）。显然是第一个样式的优先级更高的，所以显示为红色。
但不是所有选择器的样式都能相加的，比如由逗号隔开的分组选择器，这种每个选择器之间是没有关联的，是一种并集关系，不能进行优先级累加，还是按它原来的优先级大小进行排列。
优先级累加中有个最重要的一点就是：选择器的累加不会超过其最大的数量级。比如说，就算十个、一百个甚至更多的类选择器的优先级相加，也不会超过一个id选择器的优先级。（实际开发中一般不会有这种骚操作）。即类选择器的优先级（0，0，1，0），与同等级或者低级别的选择器不管相加多少个，其数量级都是保持在十位上，而不会升级到千位，这点跟我们的数字运算不同。要想突破数量级，只能加比自己更高级别的选择器。
特殊情况
这样有两种特殊情况的样式设置，是可以直接无视前面讲到的样式优先级规则！!important
可以在某一个样式的后边添加!important，则此时该样式会获得最高的优先级（超过内联样式）。但是要注意的事，在实际开发中这个玩意一定要慎用，因为加了这个之后，就很难再去通过css或者js去改变它的样式了。
<div id="style1" class="style2">
我是div
</div>
#style1{
color: red;
}
.style2{
color: green !important;
}
这个例子中，虽然style2是个类选择器优先级比id选择器style1低，但是style2有加!important，优先级变得最高，所以文字是显示绿色的。
继承的样式
为目标元素直接添加样式，永远比继承样式的优先级高，无视优先级的遗传规则。
如果没有直接为子元素设置样式，则子元素会继承其父元素的样式。
<div id="style1">
<span>我是div里的span</span>
</div>
#style1{
color: red;
}
span{
color: green;
}
虽然span是div的子元素，并且id选择器style1的优先级比元素选择器span高，但此时文字还是显示绿色。
总结
总的来说，可以得出这么一个CSS样式优先级的排序：
!important > 内联样式 > id选择器 > 类选择器 = 伪类选择器 > 元素选择器 > 通配选择器 > 继承
开发时在使用选择器的时候，尽量去选择类选择器或者元素选择器，尽量不要选择优先级太高的!important或者内联样式，以便更好的控制元素样式。
本文是参考尚硅谷教学视频总结而来~~~
