在前端开发中，设置好的css样式没有生效，被其他规则覆盖是常见问题，这往往和css选择器的优先级、权重规则直接相关，掌握相关规则就能快速定位问题根源。
css选择器权重等级划分
css为不同类型的选择器设定了固定的权重等级，从高到低依次为：
- 内联样式：直接写在元素style属性里的样式，权重为1000
- ID选择器：如
#header，权重为100 - 类选择器、属性选择器、伪类选择器：如
.active、[type="text"]、:hover，权重为10 - 元素选择器、伪元素选择器：如
div、::before，权重为1 - 通配符选择器、继承的样式：权重为0
权重计算规则
当一个元素被多个css规则匹配时，会把每条规则里所有选择器的权重值相加，总和更高的规则生效。如果权重总和相同，那么后定义的规则会覆盖先定义的规则。
举个例子，看下面两段css代码：
/* 规则1：权重计算 1+10+1 = 12 */
div.container p {
color: red;
}
/* 规则2：权重计算 10+1 = 11 */
.container p {
color: blue;
}
此时规则1的权重更高，段落文字会显示为红色，不会被规则2的蓝色覆盖。
排查样式覆盖的具体步骤
第一步：使用浏览器开发者工具查看生效样式
在页面中右键点击样式异常的元素，选择检查，在开发者工具的样式面板中，可以看到所有匹配该元素的css规则，被划掉的样式就是被覆盖的规则，生效的样式会排在最上方。
第二步：对比规则的权重
查看生效规则和被覆盖规则的权重，按照前面的权重等级计算总和，确认是否是权重差异导致的覆盖。如果是权重不足，可以调整选择器的组合来提升权重。
第三步：检查样式定义顺序
如果两条规则的权重总和相同，检查css文件的引入顺序或者规则的定义顺序，后定义的规则会覆盖先定义的规则，可以调整顺序解决问题。
第四步：检查内联样式和!important标记
如果样式还是不生效，检查元素是否有内联样式，或者是否有其他规则使用了!important标记，!important会提升样式权重到最高，除非有更高优先级的!important规则才会被覆盖。
权重计算示例
下面通过一个更复杂的例子演示权重计算：
/* 规则A：权重 100 + 1 + 10 = 111 */
#nav div.active {
font-size: 16px;
}
/* 规则B：权重 10 + 1 + 1 = 12 */
.active div {
font-size: 14px;
}
/* 规则C：权重 1 + 10 = 11 */
div.active {
font-size: 12px;
}
规则A的权重最高，所以匹配的元素字体大小会显示为16px，规则B和C的样式都会被覆盖。
避免样式覆盖的注意事项
- 尽量不要使用过多的ID选择器，避免权重过高难以覆盖
- 减少使用
!important标记，除非是必须的场景，否则会增加后续样式维护的难度 - 保持选择器层级简洁，过深的层级不仅权重高，还会影响样式匹配的性能
- 统一css规则的书写顺序，减少因顺序问题导致的样式冲突
注意：继承的样式权重为0，即使父元素的样式权重很高，子元素定义的同属性样式只要权重大于0，就会覆盖继承的样式。