CSS选择器优先级由权重决定，内联样式最高，依次为ID、类/属性/伪类、元素/伪元素，优先级相同时后定义的规则生效，!important虽可强制提升但应慎用，推荐通过优化结构和命名规范解决冲突。
当多个CSS规则作用于同一个元素时，浏览器需要决定应用哪条样式，这就是CSS选择器优先级的问题。如果处理不当，就会出现样式不生效、预期效果无法实现的情况。解决这类问题，关键在于理解优先级计算机制，并合理使用 !important 作为最后手段。
理解CSS选择器优先级的计算方式
浏览器通过一套评分系统来判断哪个样式胜出。优先级从高到低依次为：
- 内联样式（写在HTML标签中的 style 属性）— 权重最高
- ID选择器（如 #header）— 每个ID加100分
- 类选择器、属性选择器、伪类（如 .btn, [type="text"], :hover）— 每个加10分
- 元素选择器、伪元素（如 div, ::before）— 每个加1分
- 通配符、组合符、否定伪类（:not() 内部除外） — 不增加权重
#nav .link:hover 的优先级是 100 + 10 + 10 = 120div ul li strong 是 1 + 1 + 1 + 1 = 4
优先级相同时，后定义的规则覆盖前面的
如果两个选择器优先级相同，那么后写的CSS规则会覆盖先写的。这个“后来居上”原则常被用来做轻量级覆盖。
- 将自定义样式表放在第三方库（如 Bootstrap）之后引入
- 确保你的修复样式写在原始样式下方
- 利用这一点可以避免盲目提升选择器复杂度
谨慎使用 !important 强制提升优先级
在某些紧急场景下，比如调试或临时修复，可以使用 !important 让某条声明无视优先级直接生效。
立即学习“前端免费学习笔记（深入）”；
- 语法：
color: red !important; - 它会使该声明优先级最高，连内联样式也无法覆盖（除非也加 !important）
- 但过度使用会导致维护困难、样式混乱
更优雅的解决方案建议
与其依赖 !important 或堆叠选择器，不如优化CSS结构：
- 使用语义化类名，避免深层嵌套
- 采用 BEM 等命名规范降低冲突概率
- 用组件化思维隔离样式（如使用 CSS Modules 或 scoped 样式）
- 审查并简化已有选择器，避免“重量级”拼接
基本上就这些。掌握优先级规则后，大多数样式冲突都能通过结构调整解决，!important 只应在必要时短暂使用。
