浏览器用四元组(a,b,c,d)计算选择器优先级：a为内联样式，b为ID数，c为类/属性/伪类数，d为元素/伪元素数；逐位比较，高位相等才看下一位。
怎么算一个选择器的 specificity 值
浏览器用四元组 (a, b, c, d) 表示优先级，从左到右权重严格递减：
• a：内联样式（）有则为 1，否则为 0
• b：ID 选择器个数（如 #header）
• c：类名（.btn）、属性选择器（[type="submit"]）、伪类（:hover、:nth-child()）个数之和
• d：元素名（div、p）和伪元素（::before）个数之和
比较时逐位比，高位相等才看下一位。例如：#main .nav li a 是 (0,1,1,3)，而 .nav ul li a 是 (0,0,1,4)，前者胜出——因为 b=1 > b=0，根本不用比后面的 c 和 d。
为什么加个 div 或多套一层 :not() 就失效了
看似无害的操作，实际悄悄抬高了 c 或 d 值，导致优先级意外跃升：
• div.header 比 .header 多 1 个 d，不必要且不可控
• .btn.btn-primary.active 是 c=3，远超单个 .btn-primary（c=1）
• article section div ul li a 达到 d=6，极易被更简洁但含 ID 的规则反超
• div:not(.disabled) 中的 .disabled 也参与计分 → c=1, d=1，不是“不计算”
遇到样式被覆盖，该按什么顺序排查
别急着加 !important 或改 ID —— 先在开发者工具的 Computed 面板里看哪条规则被划掉，再依次确认：
• 是否被更高 specificity 的规则覆盖（比如父级用了 #app .card-title，你写 .card h3 就输）
• 类名/属性名有没有拼错（text-algin、backgroud-color 这类低级错误高频出现）
• JS 动态设置的 element.style.color 天然是 a=1，会盖过所有外部 CSS
• 优先提升 HTML 语义，而不是选择器长度：用 .card-title 比 .card div h3 更可控、更易维护
!important 和 Shadow DOM 真的能“绕过”优先级吗
它们不是绕过，而是**脱离同一套计算体系**：
• !important 是强制插队，权重无限高，但会破坏层叠逻辑，且用户样式表里的 !important 仍可覆盖它
• CSS-in-JS（如 styled-components）默认生成唯一哈希类名，天然 c=1 就够用，无需嵌套竞争
• Shadow DOM 内部样式不会泄露，外部 CSS 也无法穿透；但若你在 Shadow DOM 里又写 div div .item:hover，照样会陷入老问题
真正难的不是算清那串数字，而是克制住“再套一层 div”“再多加个类”的本能——大多数冲突，源头都在结构冗余上。
立即学习“前端免费学习笔记（深入）”；
