浏览器按“权值”计算优先级，不是简单数个数。标准算法是四位数比较（a,b,c,d），从左到右逐位比：

• a：内联样式存在则为 1，否则为 0（即 style 属性）
• b：ID 选择器个数（如 #header）
• c：类名（.btn）、属性选择器（[type="submit"]）、伪类（:hover）个数之和
• d：标签名（div）、伪元素（::before）个数之和

例如：#nav .item:hover 是 (0,1,2,0)，而 div#nav ul li.active 是 (0,1,1,3) —— 前者胜出，因为 c=2 > c=1。

!important 不是万能解药，它只作用于单条声明且会破坏可维护性

!important 的优先级高于行内样式，但仅限于它所在的那一条 CSS 声明；而且它不改变选择器本身的权值，只是把该声明“提权”到最高层。滥用会导致调试困难、覆盖失控。

立即学习“前端免费学习笔记（深入）”；

常见误用场景：

• 多个 !important 同时出现，最终生效取决于源码顺序（后声明覆盖前声明）
• 在行内样式里无法写 !important（HTML 的 style 属性不支持）
• 用 JS 动态设置 element.style.color = 'red !important' 无效，浏览器会忽略 !important

/* 这样写是合法的 */
.warning {
  color: orange !important;
}
/* 但这样写不会生效 */

实际开发中真正该关注的是结构与命名，而不是死磕优先级

靠堆 ID 或加 !important 解决样式冲突，往往说明 HTML 结构嵌套过深、CSS 类职责不清。BEM、CSS Modules 或原子化方案（如 Tailwind）的设计初衷，就是让样式作用域更明确、权值更扁平。

容易被忽略的一点：相同权值下，后写的样式才生效——这比记忆优先级公式更常影响结果。尤其是多人协作时，引入第三方 CSS 或动态插入样式，顺序错一点就白调半天。