CSS样式优先级按四元组（a,b,c,d）计算，内联样式＞ID＞类/伪类＞元素，!important覆盖同源无!important规则；可用开发者工具、getComputedStyle、Computed面板及禁用规则法排查。
如果您在调试网页时发现某个CSS样式未按预期生效，可能是由于多个CSS规则冲突导致优先级计算结果不同。以下是查找CSS样式优先级的计算方法：
一、理解CSS选择器权重构成
CSS优先级由选择器的类型和数量决定，权重按“内联样式 > ID选择器 > 类/属性/伪类选择器 > 元素/伪元素选择器”层级累加。权重不进位，以四元组形式表示（a,b,c,d），其中a为内联样式计数，b为ID选择器计数，c为类/属性/伪类选择器计数，d为元素/伪元素选择器计数。
1、打开浏览器开发者工具（通常按F12或右键选择“检查”）。
2、在“Elements”面板中选中目标HTML元素。
立即学习“前端免费学习笔记（深入）”；
3、右侧“Styles”面板中查看所有匹配该元素的CSS规则，每条规则旁会显示其具体权重值（如0,1,1,1）。
4、注意：!important声明不参与权重计算，但会覆盖同源中无!important的任何规则。
二、手动计算选择器权重
当需要预判样式生效顺序或验证开发者工具显示结果时，可对选择器进行逐项拆解并累加权重。每个选择器部分独立计分，组合选择器各部分权重相加。
1、识别选择器中是否存在内联style属性，若有则a=1，否则a=0。
2、统计ID选择器数量（如#header、#nav），每个计b+1。
3、统计类选择器（.btn）、属性选择器（[type="text"]）、伪类（:hover、:nth-child(2)）数量，每个计c+1。
4、统计元素标签名（div、p）、伪元素（::before、::after）数量，每个计d+1。
5、比较两个选择器权重时，从a开始逐位比较，高位大者优先；若a相同则比b，依此类推。
三、使用getComputedStyle方法获取最终生效样式
JavaScript的getComputedStyle()返回应用所有层叠规则后的实际计算值，可用于验证优先级结果是否与预期一致，尤其适用于动态生成或媒体查询影响的样式。
1、在开发者工具控制台中输入：const el = document.querySelector('目标选择器');。
2、执行：getComputedStyle(el).getPropertyValue('css属性名');，例如getComputedStyle(el).getPropertyValue('color');。
3、观察返回值是否与期望样式一致，若不一致，则说明存在更高优先级规则覆盖。
4、该方法返回的是计算后值，不包含单位丢失或简写展开等转换细节，需注意属性名使用驼峰格式（如backgroundColor）。
四、利用浏览器开发者工具的“Computed”面板反向追溯来源
“Computed”面板按属性维度列出最终生效值，并展开显示所有参与计算的CSS规则及其来源文件与行号，可直观定位哪条规则因高优先级而胜出。
1、在“Elements”面板中选中目标元素。
2、切换至“Computed”标签页。
3、在搜索框中输入要查的CSS属性（如margin-top）。
4、点击该属性右侧的箭头图标，展开所有匹配规则列表。
5、被划掉的规则表示被更高优先级规则覆盖，未划掉且位于顶部的即为最终生效规则。
五、通过禁用规则快速验证优先级假设
在开发者工具“Styles”面板中临时禁用某条CSS规则，观察页面样式是否变化，可快速判断该规则是否实际参与了最终渲染，从而反推其是否具备足够优先级。
1、在“Styles”面板中找到疑似影响目标样式的CSS规则。
2、点击该规则前的复选框，取消勾选以禁用该规则。
3、观察目标元素样式是否发生改变。
4、若样式恢复为其他状态，则说明该规则原本处于生效位置；若无变化，则说明其优先级低于其他规则或已被覆盖。
5、禁用操作仅在当前会话有效，刷新页面后自动恢复，适合快速对比测试。
