在 Chrome DevTools 中快速定位覆盖某元素的 CSS 规则，需右键元素选“Reveal in Styles”，查看带删除线的声明；优先级由内联样式>ID>类/属性/伪类>标签/伪元素决定，可用 getComputedStyle 验证最终值。
Chrome DevTools 里怎么快速找到覆盖某个元素的 CSS 规则
直接在 Elements 面板中右键目标元素 → 选 Reveal in Styles，就能跳转到右侧 Styles 面板中该元素实际生效的全部规则。重点看带删除线的声明——它们被更高优先级规则覆盖了。
注意：!important 声明会强制提升优先级，但也会让调试更难判断真实来源；如果看到多个 !important 冲突，得手动比对选择器权重和加载顺序。
- 按
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（macOS），输入Toggle Properties可展开所有 CSS 属性（包括被覆盖的） - 勾选
Styles面板右上角的Show all inherited，能看清哪些样式来自父元素继承 - 点击某条规则右侧的文件名链接，可直接跳转到源码位置（前提是开启了 sourcemap 或未压缩）
如何判断两个选择器谁的优先级更高
CSS 优先级不是“谁写在后面就赢”，而是按 内联样式 > ID > 类/属性/伪类 > 标签/伪元素 的四元组计算。用浏览器开发者工具看不出具体数值，但可以靠“排除法”验证：
.header .nav a:hover { color: red; }
#main-nav a { color: blue; }
上面例子中，#main-nav a 实际生效，因为它的 ID 选择器权重（1,0,0,0）高于 .header .nav a:hover（0,3,0,1）。
立即学习“前端免费学习笔记（深入）”；
- 用
getComputedStyle(document.querySelector('xxx'))在 Console 中查最终计算值，但不显示来源规则 - 临时给冲突规则加
!important测试效果，再逐步移除来定位真正起作用的选择器 - 避免依赖顺序：同一权重下，后声明的规则才覆盖前一个；但混用 ID 和类时，顺序无关紧要
为什么改了 CSS 却没生效？常见缓存与加载陷阱
样式没更新，90% 不是选择器写错了，而是资源没重载。先确认是否命中了以下情况：
- 浏览器缓存了
.css文件：按Ctrl+F5强制刷新，或 DevTools 的Network面板里右键 CSS 请求 →Clear browser cache and hard reload - 构建工具（如 Webpack/Vite）启用了 CSS HMR 但热更新失败：检查控制台有没有
[HMR] Update failed报错 - 样式表通过
@import引入且嵌套过深：部分浏览器对@import层级有限制，建议改用或构建时合并 - 使用了 CSS-in-JS 库（如 styled-components）：样式是动态注入的，Elements 面板里看不到原始文件路径，需在
Styles面板中找
用 :is() 和 :where() 快速测试选择器范围
想快速验证“这个选择器到底匹配了哪些元素”，不用反复改 HTML，直接在 Console 中运行：
document.querySelectorAll(':is(header, .main) p')
或者更安全地高亮匹配项：
document.querySelectorAll('nav a').forEach(el => el.style.outline = '2px solid red')
:is() 和 :where() 的关键区别在于：前者参与优先级计算，后者完全不计入（权重为 0），适合写兜底规则又不想干扰原有样式流。
-
:is(.btn, [data-action])权重等同于.btn（即 0,1,0,0） -
:where(.btn, [data-action])权重恒为 0,0,0,0，永远低于任何带类名的选择器 - 别在旧版 Safari（:is()，它曾存在严重解析 bug，导致整条规则失效
display: contents 让子元素脱离了文档流，或者父容器的 overflow: hidden 切掉了你刚加的阴影。多看一眼 computed styles 里的 layout 和 box model 面板，比重写十遍选择器都管用。 
