css样式优先级是前端开发中经常遇到的问题，当多个样式规则作用于同一个元素时，浏览器会根据优先级决定最终生效的样式。如果优先级规则不清晰，很容易出现样式互相覆盖、修改困难的情况，下面从权重计算和!important使用两个方面介绍优化方法。
css权重计算规则
css为每个选择器都设定了对应的权重值，权重高的样式会覆盖权重低的样式，权重计算遵循以下规则：
- 内联样式（写在元素style属性里的样式）权重为1000
- id选择器权重为100
- 类选择器、属性选择器、伪类选择器权重为10
- 元素选择器、伪元素选择器权重为1
- 通配符选择器、继承的样式权重为0
当多个选择器组合时，权重是各个部分的和，比如#header .nav li的权重是100+10+1=111。需要注意权重是十进制相加，不会出现进位的情况，比如11个类选择器的权重是110，仍然低于1个id选择器的100权重。
权重计算示例
下面通过代码示例看不同选择器的权重对比：
/* 权重：1（元素选择器） */
div {
color: black;
}
/* 权重：10（类选择器） */
.content {
color: blue;
}
/* 权重：100（id选择器） */
#main {
color: red;
}
/* 权重：10+1=11（类选择器+元素选择器） */
.content p {
color: green;
}
/* 权重：100+10+1=111（id选择器+类选择器+元素选择器） */
#main .content p {
color: orange;
}
如果以上样式都作用于同一个p元素，最终生效的是最后一个样式，文字颜色为橙色，因为它的权重最高。
!important的使用场景与注意事项
!important是css中用来提升样式优先级的声明，添加之后该样式的优先级会高于所有未加!important的同级样式，甚至高于内联样式。但是!important会破坏正常的权重规则，过度使用会导致样式难以维护，所以需要谨慎使用。
合理使用!important的场景
- 覆盖第三方组件的默认样式，且没有修改组件源码的权限时，可以添加!important强制生效
- 全局的基础样式，比如重置盒模型、清除默认边距，需要保证优先级最高时可以使用
- 临时调试样式时，可以快速验证效果，调试完成后需要删除或替换为正常权重写法
!important的写法示例
/* 普通样式权重为10 */
.text {
color: gray;
}
/* 添加!important后优先级最高，会覆盖上面的样式 */
.text-important {
color: red !important;
}
如果两个冲突的样式都添加了!important，那么还是会按照原来的权重规则比较，权重高的!important样式生效。
优化样式结构的实用方法
除了理解权重和!important的使用，从结构层面优化可以避免大部分优先级问题：
- 减少选择器嵌套层级，尽量不超过3层，避免无意义的权重叠加
- 拆分样式模块，基础样式、组件样式、业务样式分开管理，避免互相干扰
- 优先使用类选择器编写样式，少用id选择器和元素选择器，降低权重复杂度
- 避免内联样式，内联样式权重过高，修改时需要更高的权重才能覆盖
- 建立统一的样式命名规范，比如BEM命名，减少样式冲突的概率
优化后的样式结构示例
/* 基础样式：重置默认边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 组件样式：按钮组件 */
.btn {
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
}
.btn-primary {
background-color: #1677ff;
color: white;
}
/* 业务样式：页面专属样式 */
.page-header {
height: 60px;
background-color: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
这样的结构层级清晰，每个模块的样式权重都比较低，修改时只需要调整对应模块的样式即可，不会出现大范围的样式冲突。