css权重计算决定样式生效规则，按a,b,c,d逐位比较，高位不同则低位无效；选择器嵌套符号不增加权重，仅统计选择器类型数量；!important仅对单属性生效且仍受权重影响；权重相等时才按书写顺序覆盖。
权重计算直接决定哪个CSS规则生效
浏览器不按“谁写在后面就听谁的”这种简单逻辑处理样式，而是先算每个选择器的权重值（a,b,c,d），再逐位比较。高位数值不同，低位再大也无效。比如 #header .nav a（权重 0,1,1,1）一定压过 .nav-link.active:hover（0,0,3,0），哪怕后者写了10个类——因为ID位（b）是1 vs 0。
常见权重误判场景
开发者常以为“嵌套越深权重越高”，其实后代选择器（空格）、子选择器（>）本身不加权，只算其中的选择器类型。真正影响权重的是：
-
.list li→ 权重0,0,1,2（1个类 + 2个标签） -
.list > li→ 同样是0,0,1,2，>不贡献权重 -
div ul li a→0,0,0,4，哪怕写满屏幕，也敌不过一个.btn（0,0,1,0） -
:is(.primary, .secondary)→ 权重取组内最高，但:where()永远是0,0,0,0，适合降权
!important 不是万能解药
它确实能绕过权重比较，但只对单个属性生效，且多个 !important 之间仍要走权重+源顺序判断：
-
#app p { color: red !important; }vs.theme-dark p { color: blue !important; }→ ID胜出 - 同一选择器里混用：
color: red !important; font-size: 14px;→ 只有color强制生效，font-size正常走权重 - 第三方库用了
!important，你再加只会让冲突更难调试，不如用[data-theme="dark"] .btn提升权重
权重相等时才看书写顺序
这是唯一让“后写覆盖先写”起效的条件，但前提是 a,b,c,d 完全一致：
-
.card { padding: 16px; }和.card { padding: 24px; }→ 后者生效 -
.card.header（0,0,2,0）和.card-footer（0,0,2,0）→ 后定义的覆盖前定义的 - 但
.card.header和div.card（0,0,1,1）权重不同，顺序无关
真正容易被忽略的是：权重计算不依赖DOM结构深度，只数选择器“零件”。写十个 div > section > article > p 也不如一个 [data-uid] 属性选择器管用。别靠堆砌层级，该用属性就用属性，该拆类就拆类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
