为什么CSS中的选择器权重计算规则（110机制）如此重要？-css教程-PHP中文网

css选择器权重不是“谁写在后面就赢了”，因为浏览器按四元组(a,b,c,d)逐位比较特异性，高位优先、不进位；仅当权重完全相同时才启用层叠顺序。

为什么css中的选择器权重计算规则（110机制）如此重要？

为什么CSS选择器权重不是“谁写在后面就赢了”

因为浏览器根本不管你的CSS文件加载顺序或声明位置——除非两个规则的权重完全相同，否则层叠顺序（source order）压根不参与比较。你改了半天HTML引入顺序或把样式挪到

常见误判现象：.item p 被 p 覆盖了、#nav .link 没干过 .active、甚至加了 !important 还被另一个 !important 覆盖……这些都不是“运气不好”，是权重系统在按规则执行。

!important 不是优先级的一部分，它直接跳过权重计算，属于“强制插队”机制
内联样式 style="" 的权重是 1,0,0,0，但只要遇到带 !important 的外部规则，它立刻失效
后代选择器数量（比如 div ul li a 写了4层）不影响权重，只看里面有多少个 ID / 类 / 标签

如何快速验证某个选择器的实际权重值

别心算，也别靠经验猜。Chrome 和 Firefox 的开发者工具里，选中元素后打开 Styles 面板，悬停在任意未被划掉的 CSS 属性上，会直接显示 specificity 值，格式就是 0,1,1,1 这样的四元组。

如果你需要比对多个复杂选择器，推荐用在线计算器 specificity.keegan.st —— 粘贴进去立刻出结果。注意它不支持实验性语法如 :has()（旧版浏览器可能不识别），但主流选择器都稳。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

:not(.active) 本身不加权，但括号里的 .active 要计入 c 位，所以整体是 0,0,1,0
:is(#header, .menu, [data-id]) 的权重取内部最高者，即按 ID 算 0,1,0,0
继承来的样式（比如父元素设了 color）权重恒为 0,0,0,0，永远输给任何直接匹配的选择器

为什么“110机制”容易被当成玄学

因为很多人把权重当成了十进制数来加：看到 .nav ul li 有 3 个标签，就以为是 3；看到 .nav#main 就算成 100 + 10 = 110，再加个 p 变成 111 —— 这种算法在简单场景碰巧对，但一遇到 #sidebar .list-item:hover 就崩：它其实是 0,1,2,0，不是 120。

关键点在于：它不进位。哪怕你写出 99个类 + 99个标签，权重仍是 0,0,99,99，而一个 ID 就是 0,1,0,0，直接碾压。

权重比较是“地址式”逐位比大小，不是数值求和
*（通配符）、>（子选择器）、+（相邻兄弟）这些组合器权重为 0,0,0,0，但会影响匹配范围，间接导致“看起来生效了”
伪元素 ::before 和伪类 :hover 分属不同权重位，混用时别漏算

什么时候该提高权重，而不是加 `!important`

加 !important 是临时止痛，不是治疗方案。真正要解决样式覆盖问题，得让自己的规则“合法地更强”。比如：

把 .btn 改成 .btn.primary，c 位从 1 升到 2
把 ul li a 改成 .nav-list .nav-link，d 位降、c 位升，总权重反而更高
用属性选择器强化意图：input[type="text"]:focus 比单纯 .focused 更精准、权重也更高（0,0,2,0 vs 0,0,1,0）