打开开发者工具查看被划掉的样式及其 specificity 值（如 0,0,2,1），该四元组按内联>ID>类/伪类>标签顺序逐位比较，值高者胜出；!important 插队但不改变 specificity 数值。
样式写了但没生效，八成不是写错了，而是被另一条规则压住了——specificity才是决定谁赢的裁判。
怎么看哪条 CSS 规则赢了？
打开 Chrome 开发者工具（F12），用 Ctrl+Shift+C 选中目标元素，在右侧 Styles 面板里找带删除线（strikethrough）的属性。鼠标悬停上去，会显示 specificity is lower than another rule，并附带一个四元组值，比如 0,0,2,1：
- ID 选择器（如
#header）贡献 100（对应第二位） - 类、属性、伪类（如
.btn、[disabled]、:hover）各算 10（第三位） - 标签、伪元素（如
div、::before）各算 1（第四位） - 内联样式（
）是 1000（第一位），基本不可逆
!important 不改变这个值，它只是让该声明跳过层叠顺序“插队”——但另一个 !important 还是要比权重。
为什么加了类名还是不生效？
常见错觉：你写了 .card__title，但页面里同时存在 .modal .header h2，后者权重是 0,0,2,1（两个类 + 一个标签），而前者只有 0,0,1,0，直接被盖掉。
立即学习“前端免费学习笔记（深入）”；
- 确认
class名拼写、连字符、空格完全一致 ——.card .title和.card > .title是两回事 - 第三方库（如 Ant Design）常在末尾引入，且用深度嵌套或
ID，你自己的.btn很难赢过它的.ant-btn-primary -
<style scoped>或 CSS Modules 会自动加属性选择器（如div[data-v-abc123]），你写的div .title根本匹配不到真实 DOM - 继承属性（如
color、font-size）不参与权重计算，它们只是“冒泡上来”，不是你那条规则赢了
怎么安全提高选择器优先级？
优先用精准选择器，而不是堆砌或硬加 !important。后者短期解急，长期会让后续修改变成“谁最后加 !important 谁赢”的混乱局面。
- 改用 BEM 命名（如
.card__title--large）替代无意义嵌套（.card .content .title），权重稳定且语义清晰 - 用子选择器
>替代空格，例如.dialog > .footer比.dialog .footer更可控 - 必要时用属性选择器兜底：
[data-role="tooltip"]权重 = 10，和类持平，但更不易被意外覆盖 - 避免
@import：它解析滞后，容易打乱预期加载顺序；多个<link>按 HTML 出现顺序加载，把自定义样式放最后
什么时候该用 :where() 主动降权？
:where() 的核心机制不是“加功能”，而是“归零权重”。它括号里所有选择器（哪怕包含 #header 或 .nav .item a）都不贡献任何权重值，最终整条规则的权重恒为 (0, 0, 0, 0)，和通配符 * 同级。
- 适用场景：重置第三方库默认样式、写 CSS reset 片段、给旧项目加兼容层时避免干扰现有规则
- 别把
:where()当成“万能低权 wrapper”套在所有规则外：:where(.modal .modal__content)就失去意义 - 务必把
:where()规则放在自定义样式表靠前位置（比如reset.css开头），否则它归零后反而被后面高权规则压制 - Safari 15.4+ / Chrome 105+ 才稳定支持，老版本需 fallback
真正难处理的，往往不是权重算错，而是同一份 CSS 文件里混着 reset、base、components、overrides 多个意图，又没用 @layer 明确分层——这时候权重再准也没用，因为“谁先写谁被覆盖”的顺序本身就不受控。
