CSS样式失效主因不是权重计算错误，而是规则未被浏览器解析（语法错误、Shadow DOM隔离、加载顺序问题），需先排查控制台报错、注入时机和作用域限制。
为什么 !important 都压不住你的样式
不是权重算错了，而是你没意识到浏览器根本没“看到”那条规则——它被语法错误、作用域隔离（比如 Shadow DOM）、或 CSS 文件加载顺序直接屏蔽了。先检查控制台有没有 Invalid property name 或 Unknown pseudo-class 这类报错，再确认样式是否在目标元素渲染后才注入（比如动态插入的 晚于组件挂载）。
#header .nav a:hover 和 .nav-link.active 谁赢
前者权重是 1-1-1（1 个 ID + 1 个 class + 1 个标签），后者是 0-2-0（2 个 class），按 CSS 优先级计算规则，1-1-1 > 0-2-0，所以 ID 选择器赢。但注意：!important 不参与权重比较，它单独在声明生效阶段介入；而内联样式（style="color: red"）权重为 1-0-0-0，比任何选择器都高。
- ID 选择器数量决定千位，class/属性/伪类决定百位，标签/伪元素决定十位，通配符和继承为 0
-
:is()和:where()内部选择器不叠加权重——:is(.a, #b) .c权重只按.c算（0-1-0） - 同一份 CSS 中，后声明的规则在权重相同时覆盖前面的，但这个“后”指解析顺序，不是文件位置
Vue/React 组件里写 .btn { color: blue } 为啥无效
因为 scoped 样式或 CSS-in-JS 默认加了属性选择器隔离，实际生成的是类似 .btn[data-v-f3f26924] { color: blue }，权重变成 0-2-0。而你试图覆盖的外部样式可能是 .btn.primary（0-2-0）或 button.btn（0-1-1），表面看一样，但浏览器严格按字符串顺序逐位比对权重值，0-2-0 == 0-2-0 时就看谁在后面。
- scoped 下想提权？用
:deep(.el-button)（Vue）或div > .target（增加标签层级） - 避免用
!important硬顶，它会破坏可维护性，且在 Shadow DOM 中可能被 host 样式强制忽略 - 用 Chrome DevTools 的 Styles 面板点开每条样式，右侧明确标出 “specificity: 0,2,0”，比心算靠谱
用 [type="submit"] 替代 input[type="submit"] 会降权吗
不会降，反而可能升——属性选择器 [type="submit"] 权重是 0-1-0，和 class 一样；而 input[type="submit"] 是 0-1-1（1 个属性 + 1 个标签）。但实际中更关键的是兼容性：[type="submit"] 会匹配所有带该属性的元素（包括 ），而 input[type="submit"] 只锁死 input 标签。别为了“省权重”牺牲语义和覆盖范围。
立即学习“前端免费学习笔记（深入）”；
- 标签选择器代价低但太宽泛，属性选择器精准但略重，class 是平衡点
- 移动端 Safari 对
:nth-child(n+2)类复合伪类有解析 bug，权重计算可能异常，优先用 class 控制 - 权重只是最后防线，真正该做的是用 BEM 命名减少嵌套，让样式流自然从上到下收敛
