开发网页时，我们通常会遇见样式不生效的情况，这时候应该注意样式层叠和样式优先级问题
了解层叠性
样式层叠有两种情况：
1）给同一个标签设置不同的样式，此时样式会叠加，会一起作用在该标签上；
2）给同一个标签设置相同的样式，这时会出现样式覆盖，写在最后的样式会生效（就近原则）
当样式冲突时，要先看选择器优先级是否相同，只有当选择器优先级相同时，才能通过层叠性判断结果
理解优先级
不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
关于优先级，有一个计算公式可以了解一下：
！important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承
关于 ！important 要注意：
1）！important 写在属性值的后面，分号的前边；
2）！important 不能提升继承的优先级，只要是继承，它的优先级就是最低的；
3）实际开发中，尽量避免使用 ！important，特殊情况下可以少量使用
我们可以根据 哪个选择器的范围越广，哪个的优先级就越低 来快速判断哪个样式会生效：
权重叠加计算
上面的优先级只能判断简单的情况，如果是复合选择器，此时需要通过权重叠加计算方法来计算，判断最终哪个选择器的优先级最高，哪个就会生效
权重叠加计算也有一个计算公式：
注意点及比较规则：
1）每一级之间不存在进位；
2）如果不是继承，！important 权重最高；
3）先比较第一级数字，如果比较出来了，之后的可以不看，它的权重就最大；
4）如果第一级数字相同，则再去比较第二级的数字，如果比较出来了，后面的就不用看了，以此类推，直到比较完所有的级；
5）如果比较完了，最终所有的数字都相同，则表示优先级相同，这时就要去比较层叠性了，就近原则
权重计算小例子
权重计算看上去有点复杂，但当你理解了并不难，下面来几个小例子：
（1）普通计算
分析
1）先找有没有样式继承，绿色样式和黄色样式的选择器选中的是 div 标签，对文本来说，它是父元素，那么它的样式对于文本就是样式继承，优先级中，继承的权重最低，所以排除；
2）再看剩下的蓝色、黑色、红色样式标签选择器中，没有行内样式，所以行内样式的权重为0，id选择器的权重依次为2，1，0，可以看到蓝色样式的权重最大，所以后面的不用再往下看，上面的文本最终的颜色就是蓝色
（2）标签选择器选择一类
分析 ：上图中，第一个样式的权重是（0,0,0,2），第二个样式的权重是（0,0,0,1），所以最终生效的是第一个样式 skyblue
（3）权重叠加每位不存在进制
分析 ：在上图中，1）根据样式优先级可以快速判断出，最终的生效样式是粉色，因为类选择器的优先级比标签选择器的优先级高；
2）按照样式权重叠加计算方式，可以得出：两个样式中都没有行内样式和 id 选择器，但第二个样式是类选择器，它的权重是1 --->（0，0，1，0），所以最终的生效样式依然是 粉色 。
3）第一个样式的权重计算结果是（0,0,0,12），没有进位
（4）权重相同，比较层叠性
分析 ：根据权重叠加计算方法可以得出，最后两个样式的优先级比第一个的优先级高，并且它们的权重相同，这时候就要比较层叠性了，黄色的样式在下面，根据就近原则，最终黄色生效
（5）全是继承的特殊情况
全是继承的特殊情况，就要看优先继承哪个：谁离得近就先继承谁
1）1 --- 选中第一个 div 标签 --- 红色
2）2 --- 选中 p 标签 --- 蓝色
3）3 --- 选中第二个 div 标签 --- 浅绿
span 标签优先继承它的父级，即 p 标签的样式，所以最终会显示蓝色
