CSS权重计算与选择器优先级解析

golang学习网今天将给大家带来《CSS权重计算规则及选择器生效顺序详解》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

CSS权重是按位比较的四元组(a,b,c,d)：a为内联样式（0或1），b为ID个数，c为类/属性/伪类总数，d为标签/伪元素总数；高位优先比较，不叠加不进位。

CSS 权重不是“加起来比大小”的数字，而是按位比较的四元组 (a, b, c, d)：谁在左边（高位）大，谁就赢，根本不会算到右边去。

怎么算出 (a,b,c,d)？看选择器里有什么

拆开你的选择器，逐类计数，不叠加、不进位、不靠嵌套深度：

• a = 1 当且仅当用了 style="..." 内联样式；否则为 0
• b 是 ID 选择器个数，比如 #nav #user → b = 2（不是 200）
• c 是类名 .btn、属性 [type]、伪类 :hover 的总个数
• d 是标签名 div、伪元素 ::before 的总个数

例如：article#main .post[data-id]:hover::after → (0, 1, 3, 2)（1 个 ID、3 个类/属性/伪类、2 个标签/伪元素）

为什么 .modal .content span 比不过 #user-name？

因为权重比较是“高位优先”：前者是 (0, 0, 2, 3)，后者是 (0, 1, 0, 0)。b 位 1 > 0，直接胜出——后面三位压根不比。

• 深层嵌套（如 .a .b .c .d .e）只增加 d，最多凑到 5，远不如一个 ID 的 b = 1
• >、+、空格这些组合符不贡献任何权重，只影响匹配逻辑
• :not(.active) 本身不加权，但括号里的 .active 算 1 个 c

继承来的样式为什么总被覆盖？

继承值的权重是 (0, 0, 0, 0)，哪怕父级是 #app（权重 (0,1,0,0)），子元素只要写一行 p { color: red; }（(0,0,0,1)），立刻生效。

• 别指望靠父级高权重“透传”样式，该加类就得加类
• 想统一控制？用语义类名，比如 .text-emphasis，而不是 .section h2 层层兜底
• !important 虽能破局，但它会污染可维护性，且无法覆盖用户样式表里的 !important

两个规则权重一样时，谁赢？

只有当 (a,b,c,d) 完全相等，浏览器才看 CSS 文件里谁定义在后面。比如：

.btn.primary { color: blue; }
.btn:focus { color: red; }

两者都是 (0,0,2,0)，所以后写的 :focus 生效。但这不是可靠策略——一旦有人改顺序或抽离样式，就失效。

真正稳的做法，是让目标元素的选择器“本身”就足够明确，比如直接写 .btn.primary:focus（(0,0,3,0)），而不是赌顺序。

最容易被忽略的一点：权重计算和 DOM 结构深度无关，和选择器写法“看起来多不多”也无关——只看你用了几个 ID、几个类、几个标签。盯住 (a,b,c,d) 四位，一位一位比，问题就清楚了。

好了，本文到此结束，带大家了解了《CSS权重计算与选择器优先级解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！