优先级与 !important
特指度计算(0,0,0,0)、!important 慎用、覆盖规则
优先级与 !important
当多条规则冲突时，浏览器按优先级（特指度） 决定哪条生效。
学完本章你将： 掌握特指度计算 (0,0,0,0)、!important、覆盖规则。
特指度计算
特指度 = (style, ID, class/伪类/属性, 元素/伪元素)
内联样式: (1,0,0,0)
ID: (0,1,0,0) 每个 id 加 1
class/伪类: (0,0,1,0) 每个 class 加 1
元素/伪元素: (0,0,0,1) 每个元素加 1css
p { color: black; } /* (0,0,0,1) */
.intro { color: blue; } /* (0,0,1,0) 胜出 */
#main p.intro { color: red; } /* (0,1,1,1) 胜出 */比较规则
css
/* 从左到右逐级比较——(0,1,0,0) > (0,0,99,99) */
#header { } /* (0,1,0,0) 更高 */
div.container p { } /* (0,0,1,2) 更低 */
/* 同优先级——后写的覆盖先写的 */!important（慎用）
css
p { color: red !important; } /* 打破一切优先级 */
p { color: blue; } /* 无效——上面有 !important */
/* ❌ 不要轻易用——会让 CSS 难以维护 */
/* ✅ 只有覆盖第三方样式或工具类时才考虑 */💡 优先级问题的最佳解法：提高选择器特指度，而不是
!important。