打开开发者工具（f12）选中元素，在styles面板中查看带删除线的属性声明，即被更高优先级规则覆盖的样式；悬停可显示覆盖来源，生效样式位于列表最下方；最终渲染值见computed面板。
怎么看哪条CSS规则被覆盖了
打开开发者工具（F12），选中目标元素，在右侧 Styles 面板里找带删除线（strikethrough）的属性声明——那就是被更高优先级规则压掉的。鼠标悬停在被划掉的样式上，会提示 This rule was overridden by …，并标出来源文件和行号。
没被划掉但也没生效？可能根本没匹配上：检查元素实际 class 名拼写、是否在 Shadow DOM 里、有没有被 all: unset 或继承值干扰。
真正生效的值在哪看？切到 Computed 面板，直接看到最终渲染值，以及它来自哪条规则、哪个文件、哪一行。
权重不是加法，是四元组逐位比较
CSS 权重是个四元组 (a,b,c,d)，从左到右比大小，不进位、不相加：
-
a：内联样式个数（style=""），几乎不用管，除非真写了 -
b：ID 选择器个数（如#header），每个 +100 -
c：类 / 属性 / 伪类个数（如.btn、[type]、:hover），每个 +10 -
d：标签 / 伪元素个数（如div、::before），每个 +1
例如：form#search input[type="text"]:focus 是 (0,1,2,2)；.search-input:focus 是 (0,0,2,0)；前者赢。
:is() 和 :where() 不叠加权重，只取内部最高项；!important 不参与这个计算，它是另一套“强制插队”机制。
为什么加了 class 还不生效
常见错觉：你写了 .btn-primary，但框架里有 button.btn.btn-primary（权重 (0,0,3,1) vs (0,0,1,0)）→ 直接输。
Vue 的 <style scoped></style> 或 React 的 CSS Modules 会自动加属性选择器（如 div[data-v-abc123]），你写的 div .title 根本不匹配真实 DOM。
把自定义 <style></style> 放在 <link rel="stylesheet" href="bootstrap.css"> 前面 → 即使权重一样，也会被后加载的覆盖。
排查要点：
- 右键审查元素，确认
class名、空格、连字符完全一致 -
.card .title和.card > .title是两回事：前者匹配任意后代，后者只认直接子元素 - 第三方库常在末尾引入，且用深度嵌套或 ID，你自己的
.btn很难赢过它的.ant-btn-primary
怎么安全地提高选择器优先级
优先用精准结构，而不是堆砌或硬加 !important。后者短期解急，长期会让后续修改变成“谁最后加 !important 谁赢”的混乱局面。
实操建议：
- 改用 BEM 命名（如
.card__title--large）替代无意义嵌套（.card .content .title），权重稳定且语义清晰 - 用子选择器
>替代空格，例如.dialog > .footer比.dialog .footer更可控 - 必要时用属性选择器兜底：
[data-role="tooltip"]权重 = 10，和类持平，但更不易被意外覆盖 - 避免
@import：它解析滞后，容易打乱预期的加载顺序；多个<link>按 HTML 出现顺序加载，把自定义样式放最后
真正卡住的时候，别只盯着 CSS 文件改来改去。先 inspect 元素，确认它最终渲染出的 class 名、DOM 层级、是否在 Shadow DOM 里——这些结构细节，往往比权重计算本身更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
