CSS 样式为什么不生效：特异性权重一次算清，别再堆 !important

约 7 分钟读完 · 更新于 2026-10-21 · 文中每条都能在下面的配套工具里动手验证

先记住唯一的规则：按位比大小

特异性不是一个数字，而是一个三元组 (A, B, C)：A 数 ID 选择器，B 数类、伪类与属性选择器，C 数元素与伪元素。比较时从左到右——A 大的赢，A 相同比 B，以此类推。把「权重 131」这种口诀忘掉，直接看三元组更不容易错。

现代选择器的三条特殊规则

伪类家族里混进了几个「规则改变者」，它们是大多数误算的来源：

/* 全部 (0,1,0)：:where 里的 #app 不计权 */
:where(#app) .card { color: gray; }   /* (0,1,0) */
#app .card         { color: black; } /* (1,1,0) 覆盖上一行 */

:is(#a, .b) p { }   /* #a 是 (1,0,0)，整条 = (1,0,1) */
:not(.x) p    { }   /* .x 是 (0,1,0)，整条 = (0,1,1) */
/* 参数列表再长也只贡献一个最高值，不叠加 */

「写了样式却不生效」的排查顺序

在 DevTools 里按这个顺序查，90% 的案例 2 分钟内出结果：

1. Elements 面板选中元素，看目标声明有没有出现在 Styles 里——没出现说明选择器根本没匹配上（拼写、层级、动态类名）
2. 出现在 Styles 里但被划掉——点开划掉线看是谁覆盖的：同文件下方、更高特异性或另一文件
3. 被内联样式覆盖——去掉内联，或把自己的规则升级成 !important 前先想想能不能改结构
4. 都没问题但仍不生效——检查 !important 链：一层 important 之上还有另一层 important
5. 还是不行——看是不是 :where 包着的低优先级全局样式，或者 CSS 嵌套里 & 展开后的真实选择器和你想的不一样

减少特异性战争的三个习惯

• 全站约定特异性格局：单类选择器为主体（(0,1,0)），状态类叠加（(0,2,0)），ID 只用于 JS 钩子不进 CSS
• 覆盖第三方样式时用 :where() 或 :is() 显式控制权重，而不是无脑堆叠祖先
• !important 只允许出现在工具类（如 .hidden { display: none !important }）——语义是「这类的优先级必须最高」

常见问题