直接查DevTools Styles面板中带删除线的样式，悬停可见覆盖来源；权重按四元组(a,b,c,d)逐位比较，不进位相加，a为内联、b为ID、c为类/伪类、d为标签数。
CSS样式被覆盖不是代码写错了，而是浏览器按权重和顺序做了确定性选择——你看到的“失效”，其实是它严格执行了规则。
怎么看哪条规则赢了？直接查 DevTools 的 Styles 面板
右键元素 → “检查”，在右侧 Styles 面板里找带删除线（strikethrough）的属性。被划掉的那条就是被覆盖的；没被划掉、但你又没看到效果的，可能是它根本没匹配上目标元素。
- 鼠标悬停在被划掉的样式上，会提示
This rule was overridden by …，并标出来源文件和行号 - 点右侧的文件名链接，能跳转到对应 CSS 源码位置
- 临时取消勾选某条规则左侧的复选框，观察样式是否恢复，可快速验证覆盖源
- 注意：浏览器插件（如 Dark Reader、Stylus）注入的样式也参与层叠，别漏查
权重不是加法，是四元组 (a,b,c,d) 逐位比较
比如 div#main.content:hover 的权重是 (0,1,2,1)，而 .sidebar ul li a 是 (0,0,1,4) —— 前者胜出，尽管后者用了更多标签名。比较时先看 ID 个数（b），b 相等再比类/伪类个数（c），依此类推，不进位、不相加。
-
a：内联样式数量（style="..."）→ 每个计 1 -
b：ID 选择器个数（如#header）→ 每个计 1 -
c：类、属性、伪类个数（如.btn、[type="text"]、:hover）→ 每个计 1 -
d：标签名、伪元素个数（如div、::before）→ 每个计 1
@media 媒体查询为啥不生效？大概率顺序反了
媒体查询本身不改变选择器权重，只限定生效条件。但它必须放在基础样式之后，否则会被同权重的基础规则覆盖。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法：
@media块写在.title { font-size: 24px; }前面 → 小屏下仍显示 24px - ✅ 正确写法：基础样式在前，
@media在后 → 同权重时后声明者胜出 - 动态插入的
<style>或 JS 创建的<link>，以插入时刻为序，但要注意是否早于框架初始化
为什么加了 !important 还不管用？
!important 不参与权重计算，但它会被另一个 !important + 更高权重的选择器覆盖。而且它会让调试变难：DevTools 中只标 “important”，不告诉你谁赢了谁输了。
- 慎用：仅用于临时调试或绕不过的第三方库限制（如某些 iframe 内嵌样式）
- 替代方案优先级更高：提升选择器具体性（如把
.btn改成body .my-app .btn），或调整加载顺序 - 避免堆砌：
div div .btn:hover !important看似强，实则难维护、易被更高权重反杀
真正卡住的时候，别只盯着 CSS 文件改来改去。先 inspect 元素，确认它最终渲染出的 class 名、DOM 层级、是否在 Shadow DOM 里——这些结构细节，往往比权重计算更早决定样式能不能触达。
