CSS样式被覆盖怎么解决？选择器优先级排查方法

CSS样式被覆盖问题本质源于选择器优先级（specificity）与层叠顺序（cascade order）的双重作用，而非代码错误；高效解决的关键在于善用浏览器开发者工具——通过识别带删除线的失效样式、精准跳转源码、对比四元组权重（a,b,c,d）快速定位冲突根源，并确保自定义样式在加载顺序上后于第三方库；同时警惕!important的滥用陷阱，它虽能临时“破局”，却会严重损害可维护性与团队协作效率。

当CSS样式被其他规则覆盖时，核心原因是浏览器根据选择器的优先级（specificity）和层叠顺序（cascade order）决定最终生效的声明。排查的关键不是盲目改代码，而是理解并利用浏览器开发者工具，结合权重计算逻辑快速定位冲突源头。

用开发者工具直接看“被划掉”的样式

在 Chrome 或 Edge 中右键元素 → “检查”，在右侧 Styles 面板中观察： - 未被覆盖的样式正常显示； - 被覆盖的样式会带删除线（strikethrough），且上方通常标有“x”或灰色提示； - 点击该样式右侧的文件名和行号，可跳转到对应 CSS 源码位置； - 展开同一条属性（如 color），能看到所有匹配的声明，按实际应用顺序从上到下排列，最下方生效。

对比选择器权重：内联 > ID > 类/属性/伪类 > 标签/伪元素

权重不是相加总分，而是按四元组 (a,b,c,d) 比较： - a：内联样式（如 style="..."）→ 计 1； - b：ID 选择器个数（如 #header）→ 每个计 1； - c：类、属性、伪类个数（如 .btn、[type="text"]、:hover）→ 每个计 1； - d：标签名、伪元素个数（如 div、::before）→ 每个计 1； 比较时先比 a，再比 b，依此类推，高位胜出，不进位相加。

• div#main.content:hover → (0,1,2,1)
• .sidebar ul li a → (0,0,1,4)
• style="color:red" → (1,0,0,0) → 最高优先级

注意层叠顺序：后定义的低权重要可能胜出

当两个选择器权重完全相等时，CSS 文件中后出现的规则会覆盖前面的（就近原则）。常见陷阱包括： - 引入第三方 UI 库（如 Bootstrap）的 CSS 在你自己的样式之后加载； - Vue/React 组件中