行内样式优先级最高，但!important可覆盖它；CSS优先级按(a,b,c,d)权值逐位比较，相同权值时后声明生效；滥用!important和ID选择器暴露结构与命名问题。
行内样式比所有 CSS 选择器优先级都高
直接写在 浏览器按“权值”计算优先级，不是简单数个数。标准算法是四位数比较（a,b,c,d），从左到右逐位比： 例如： 立即学习“前端免费学习笔记（深入）”； 常见误用场景： 靠堆 ID 或加 容易被忽略的一点：相同权值下，后写的样式才生效——这比记忆优先级公式更常影响结果。尤其是多人协作时，引入第三方 CSS 或动态插入样式，顺序错一点就白调半天。style 属性里的样式，比如 块或 @import 引入的规则，无论选择器多复杂（哪怕用 !important 也要看位置和声明顺序）。CSS 选择器优先级怎么算：内联 > ID > 类/属性/伪类 > 标签/伪元素
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 属性不支持）element.style.color = 'red !important' 无效，浏览器会忽略 !important
/* 这样写是合法的 */
.warning {
color: orange !important;
}
/* 但这样写不会生效 */
实际开发中真正该关注的是结构与命名，而不是死磕优先级
!important 解决样式冲突，往往说明 HTML 结构嵌套过深、CSS 类职责不清。BEM、CSS Modules 或原子化方案（如 Tailwind）的设计初衷，就是让样式作用域更明确、权值更扁平。
